使用 JavaScript/jQuery 获取 html 表中一行的选定下拉值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30182957/
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 selected drop-down value of a row in html table using JavaScript/jQuery
提问by Anand
I have a html table with 4 columns and multiple rows
我有一个 4 列多行的 html 表
column1 : simple text
column2 : simple text
column3 : select list with 2 values
column4 : Button that performs some operation
At run time, I want to get the selected / entered values for all the columns of that row against which column4button is clicked. I know a little of JavaScript/jQuery.
在运行时，我想column4为单击按钮的那一行的所有列获取选定/输入的值。我知道一点 JavaScript/jQuery。
Here is the static table code
这是静态表代码
<table id="invoiceTbl" border="1">
<thead>
<tr>
<th>Broker info</th>
<th>Receivable Amount</th>
<<th>Status</th>
<th>Action</th>
</tr>
</thead>
<tbody></tbody>
</table>
And I am populating table i.e. inserting data on AJAX call like this:
我正在填充表，即在 AJAX 调用上插入数据，如下所示：
$.ajax({
type: "POST",
data: $('#searchDetails').serialize(),
async: false,
cache: false,
url: "/opsadmin/search.json",
dataType: 'json',
success: function (result) {
var i = 1;
$.each(result, function (index, value) {
alert(index + ": " + value.brokerInfo);
$('table#invoiceTbl TBODY').append('<tr> <td>' + i + '</td><td>' + value.brokerInfo + '</td><td>' + value.receivableAmount + '</td><td><select name="act" id="s"><option>PENDING</option><option>CLEARED</option></select></td><td><input type="button" value="Process" onclick="updateStatus(\'' + index + '\')"</input></td></tr>');
i++;
});
}
});
return false;
采纳答案by Hardy
First set the unique ID to each of your "select" with help of index like:
首先在索引的帮助下为每个“选择”设置唯一 ID，例如：
'<select name="act" id="s'+ index +'">'
and pass the index with "updateStatus(index)" function call.
并通过“updateStatus(index)”函数调用传递索引。
function updateStatus(index) {
$('#s'+index).val(); // value of selected box.
}
回答by kapantzak
On #buttonclick you will get an array (arr) that holds the values of the clicked row cells:
上#button点击一下，你会得到保存点击的行单元格的值的数组（ARR）：
$('#button').on('click', function() {
var arr = [];
$(this).closest('tr').find('td').each(function() {
var that = $(this);
if (that.find('input[type="text"]').length > 0) {
arr.push(that.find('input[type="text"]').val());
} else if (that.find('select').length > 0) {
arr.push(that.find('select').val());
} else {
arr.push(that.text());
}
});
alert(arr);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>text</td>
<td>text2</td>
<td>
<select>
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</td>
<td><button id="button">Click</button></td>
</tr>
</tbody>
</table>回答by Vishwajeet Bose
$("#invoiceTbl input[type=button]").click(function(e){
$(e.target).closest("tr").find("td").slice(0,2).each(function(){
console.log($(this).text());
});
});
回答by keewnn
There's already a few good answers, but my solution is a bit different:
已经有一些很好的答案，但我的解决方案有点不同：
$("#invoiceTbl tr").each(function(){
var select = $(this).find("select");
var button = $(this).find("button");
button.click(function(){
alert(select.val());
});
});
If you also want the content of the other columns, that's a bit more difficult:
如果您还想要其他列的内容，那就有点困难了：
$("#invoiceTbl tr").each(function(){
var tr = $(this);
var button = $(this).find("button");
button.click(function(){
tr.find("td").each(function(){
var select = $(this).find("select");
var td_button = $(this).find("button");
if(!td_button.length)
{
if(select.length)
console.log(select.val());
else
console.log($(this).text());
}
});
});
});
Check out https://jsfiddle.net/cgfjewoe/to see it run.
查看https://jsfiddle.net/cgfjewoe/以查看它的运行情况。
