javascript 从html表中选择多行并将值发送到javascript中的函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24796209/
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
Select multiple rows from html table and send values to a function in javascript
提问by user3201640
I have an HTML table where I need to select multiple rows and send first cell value of each row to a function. I tried the follwing code. This selects only one row and sends only one value to the function. If I select multiple rows only the first value selected is entering the function. How do I solve this issue?
我有一个 HTML 表格，我需要在其中选择多行并将每行的第一个单元格值发送到一个函数。我尝试了以下代码。这仅选择一行并向函数发送一个值。如果我选择多行，只有选择的第一个值进入函数。我该如何解决这个问题？
test.html
测试.html
<table id="table">
<tr>
<td>1 Ferrari F138</td>
<td>1 000</td>
<td>1 200</td>
</tr>
<tr>
<td>2 Ferrari F138</td>
<td>1 000</td>
<td>1 200</td>
</tr>
<tr>
<td>3 Ferrari F138</td>
<td>1 000</td>
<td>1 200</td>
</tr>
</table>
<input type="button" class="ok" id="tst" value="OK" onclick="" />
test.js
测试.js
$("#table tr").click(function(){
$(this).addClass('selected').siblings().removeClass('selected');
var value=$(this).find('td:first').html();
alert(value);
});
$('.ok').on('click', function(e){
var selectedID=$("#table tr.selected td:first").html();
fnMatchID(selectedID);
});
function fnMatchID(selectID){
//some code here
}
DEMO :::: JSFiddle
演示 :::: JSFiddle
I need to select multiple rows and send all the first cell values of the selected rows to a function.
我需要选择多行并将所选行的所有第一个单元格值发送到函数。
采纳答案by Thorbj?rn Kappel Hansen
Depending on whether you want to call the function multiple times or send the data along as an array, there are two things you can do.
根据您是要多次调用该函数还是将数据作为数组发送，您可以做两件事。
Either way, don't removeClass on .siblings(), if you want to be able to select multiple rows. You might also consider using .toggleClass("selected") instead of .addClass("selected"), if you want to be able to unselect rows.
无论哪种方式，如果您希望能够选择多行，请不要在 .siblings() 上删除类。如果您希望能够取消选择行，您也可以考虑使用 .toggleClass("selected") 而不是 .addClass("selected")。
Solution 1: Send data as array of strings
解决方案 1：将数据作为字符串数组发送
$("#table tr").click(function(){
$(this).addClass('selected');
var value=$(this).find('td:first').html();
alert(value);
});
$('.ok').on('click', function(e){
var selectedIDs = [];
$("#table tr.selected").each(function(index, row) {
selectedIDs.push($(row).find("td:first").html());
});
fnMatchID(selectedIDs);
});
Solution 2: Call function repeatedly
解决方案2：重复调用函数
$("#table tr").click(function(){
$(this).addClass('selected');
var value=$(this).find('td:first').html();
alert(value);
});
$('.ok').on('click', function(e){
$("#table tr.selected").each(function(index, row) {
fnMatchID($(row).find("td:first").html());
});
});
Either way, what you're probably looking for is the .each function: http://api.jquery.com/each/
无论哪种方式，您可能正在寻找的是 .each 函数：http://api.jquery.com/each/
回答by code-jaff
simple solution would be like this,
简单的解决方案是这样的，
$("#table tr").click(function(){
$(this).toggleClass('selected');
});
$('.ok').on('click', function(e){
var selected = [];
$("#table tr.selected").each(function(){
selected.push($('td:first', this).html());
});
alert(selected);
});
