使用 Javascript 或 JQuery 从特定表行和列中获取选择值和选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27805357/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get Select Value and Option from Specific Table Row and Column with Javascript or JQuery
提问by TyJacobs
I have a table that has rows appended to it. Each row has a select in column 2 {0, 1, [2]}. I am trying to get the text/value/option of the select using JavaScript or JQuery. This seems like it should be something easy but for the life of me I cannot figure out a way to get the select element in the selected row & column. Any help would be greatly appreciated.
我有一个附加了行的表。每行在第 2 列中都有一个选择{0, 1, [2]}。我正在尝试使用 JavaScript 或 JQuery 获取选择的文本/值/选项。这似乎应该很简单，但对于我的生活，我无法想出一种方法来获取所选行和列中的选择元素。任何帮助将不胜感激。
Here is my table.
这是我的桌子。
<div id="table_container">
<table id="computer_table" class="service_table">
<thead id="header_container">
<th class="table_header">COMPUTER NAME</th>
<th class="table_header">LIVE/HIDE</th>
<th class="table_header">MODE</th>
<th class="table_header">RUN</th>
</thead>
<tbody id="table_body">
</tbody>
</table>
</div>
Here is my JavaScript that adds rows to the table. Rows contain a select in column 2.
这是我的 JavaScript，用于向表中添加行。行包含第 2 列中的选择。
row = $('<tr class="row_white"><td class="tb_pc_name">' + value.pc_name + '</td><td class="tb_live_hide">LIVE</td><td class="tb_mode">' +
'<select id="select_mode" class="select_dropdown">' +
'<option value="0">0 - DEFAULT</option>' +
'<option value="1">1 - CLEAN UP</option>' +
'<option value="2">2 - SIGN IN</option>' +
'<option value="3">3 - SIGN OUT</option>' +
'<option value="4">4 - UPDATE IPSW</option>' +
'<option value="5">5 - OPEN DMG DIRECTORY</option>' +
'</select></td>' +
'<td class="tb_btn"><button type="button" id="btn_run">RUN</button></td></tr>');
$("#computer_table").append(row);
After all rows have been appended, the user can make a selection from the select. There is a button in column 3 that when clicked should show an alert with the select option and value of the select on the same row. The code below should show the selected option and/or value of the select in the row of the cell that is clicked. I can get the row and column but cannot get the value of the select.
在附加所有行后，用户可以从选择中进行选择。第 3 列中有一个按钮，单击该按钮时应在同一行上显示带有选择选项和选择值的警报。下面的代码应该在单击的单元格的行中显示选定的选项和/或选择的值。我可以获取行和列，但无法获取选择的值。
$("#computer_table td").click(function() {
var table = document.getElementById('computer_table');
var column_num = parseInt( $(this).index() );
var row_num = parseInt( $(this).parent().index() );
alert('test');
/*Error here.*******************************************************************************************/
var combo = table.rows[row_num + 1].cells[2].getElementById('select_mode');
//$("#select_mode option:contains("?").attr('selected', 'selected');
alert(combo.value);
});
采纳答案by jtsnr
If you changed your buttons to use a class rather than an id they could be triggered with this:
如果您将按钮更改为使用类而不是 id，则可以通过以下方式触发它们：
$("#computer_table").on("click", "button.btn_run", function(e) {
alert($(this).parent().prev().children().find(":selected").text());
});
回答by Mathieu Labrie Parent
First of all there is something wrong with youre code that add the row. Every ID must be unique and it's not the case. Try using a counter (or something else) to avoid that like this:
首先，您添加行的代码有问题。每个 ID 都必须是唯一的，但事实并非如此。尝试使用计数器（或其他东西）来避免这样的情况：
var numberRowAdded = 0;
row = $('<tr class="row_white"><td class="tb_pc_name">' + value.pc_name + '</td><td class="tb_live_hide">LIVE</td><td class="tb_mode">' +
'<select id="select_mode'+ numberRowAdded +'" class="select_dropdown">' +
'<option value="0">0 - DEFAULT</option>' +
'<option value="1">1 - CLEAN UP</option>' +
'<option value="2">2 - SIGN IN</option>' +
'<option value="3">3 - SIGN OUT</option>' +
'<option value="4">4 - UPDATE IPSW</option>' +
'<option value="5">5 - OPEN DMG DIRECTORY</option>' +
'</select></td>' +
'<td class="tb_btn"><button type="button" id="btn_run'+ numberRowAdded +'">RUN</button></td></tr>');
$("#computer_table").append(row);
numberRowAdded++;
Then to select what you want :
然后选择你想要的：
$("#computer_table td").click(function() {
alert($(this).find(".select_dropdown").val());
});
Hope this help.
希望这有帮助。
回答by ZenStein
try passing in the ID onClick:
尝试传入 ID onClick：
$("#computer_table td").click(function(this.id){ }
Just make sure all your cells have an ID.
只需确保您的所有单元格都有一个 ID。
Here is W3 example on enclosures and encapsulation. This is useful for giving all your elements a different ID. W3 encapsulation example
这是关于外壳和封装的 W3 示例。这对于为所有元素提供不同的 ID 很有用。 W3封装示例
Adding elements with eventlisteners attached, and passing in a unique id!!*Note: this is not an exact fix for your code. This should however aid you in understanding.
添加带有事件侦听器的元素，并传入唯一的 id ！！*注意：这不是您代码的精确修复。但是，这应该有助于您理解。
/*use this function to create unique id's*/
var add = (function () {
var counter = 0;
return function () {return counter += 1;}
})();
/*grab your table*/
var table =document.getElementById("computer_table");
/* create an element, set it's attributes*/
var newRow = document.createElement("th");
newRow.setAttribute("class", "table_header");
newRow.setAttribute("id", "table_header"+add());
/*add the event listener*/
newRow.addEventListener("click",function(this.id){ /* YOUR CODE HERE */ });
/*append to your table*/
table.appendChild(newRow);
