循环遍历每个 HTML 表格列并使用 jQuery 获取数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17120633/
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
Loop Through Each HTML Table Column and Get the Data using jQuery
提问by Idrees Khan
i'm trying to get the data inside the html <tbody>. Basically, i have many rows like this;
我正在尝试获取 html 中的数据<tbody>。基本上，我有很多这样的行；
<tbody>
<tr>
<td>63</td>
<td>Computer</td>
<td>3434</td>
<td>
<button class="btn-medium btn-danger remove" id="mprDetailRemove"><i class="icon-remove"></i></button>
</td>
</tr>
<tr>
<td>64</td>
<td>Stationary</td>
<td>111</td>
<td>
<button class="btn-medium btn-danger remove" id="Button1"><i class="icon-remove"></i></button>
</td>
</tr>
<tr>
<td>64</td>
<td>Stationary</td>
<td>11</td>
<td>
<button class="btn-medium btn-danger remove" id="Button2"><i class="icon-remove"></i></button>
</td>
</tr>
</tbody>
Now, i'm looping through and trying to get the <td>values like this;
现在，我正在循环并尝试获取这样的<td>值；
var table = $("#mprDetailDataTable table tbody");
table.find('tr').each(function (key, val) {
$(this).find('td').each(function (key, val) {
var productId = val[key].innerHTML; // this isn't working
var product = ?
var Quantity = ?
});
});
But, i'm not able to get the values(html text) of the each row. I want to assign these values to local variables.
Also, i don't want to get the innerHTMLof a button (which is in each row)
但是，我无法获得每一行的值（html 文本）。我想将这些值分配给局部变量。
另外，我不想得到innerHTML一个按钮（在每一行中）
回答by nnnnnn
Using a nested .each()means that your inner loop is doing one td at a time, so you can't set the productIdand productand quantityall in the inner loop.
使用嵌套.each()意味着您的内部循环一次执行一个 td，因此您不能在内循环中设置productIdandproduct和quantityall 。
Also using function(key, val)and then val[key].innerHTMLisn't right: the .each()methodpasses the index (an integer) and the actual element, so you'd use function(i, element)and then element.innerHTML. Though jQuery also sets thisto the element, so you can just say this.innerHTML.
同样使用function(key, val)然后val[key].innerHTML是不对的：该.each()方法传递索引（一个整数）和实际元素，所以你会使用function(i, element)然后element.innerHTML。虽然 jQuery 也设置this了元素，所以你可以说this.innerHTML.
Anyway, here's a way to get it to work:
无论如何，这是让它工作的方法：
table.find('tr').each(function (i, el) {
var $tds = $(this).find('td'),
productId = $tds.eq(0).text(),
product = $tds.eq(1).text(),
Quantity = $tds.eq(2).text();
// do something with productId, product, Quantity
});
回答by sangram parmar
try this
尝试这个
$("#mprDetailDataTable tr:gt(0)").each(function () {
var this_row = $(this);
var productId = $.trim(this_row.find('td:eq(0)').html());//td:eq(0) means first td of this row
var product = $.trim(this_row.find('td:eq(1)').html())
var Quantity = $.trim(this_row.find('td:eq(2)').html())
});
回答by Jurgen
My first post...
我的第一篇文章...
I tried this: change 'tr' for 'td' and you will get all HTMLRowElements into an Array, and using textContent will change from Object into String
我试过这个：将 'tr' 更改为 'td'，您会将所有 HTMLRowElements 放入一个数组中，并且使用 textContent 将从 Object 变为 String
var dataArray = [];
var data = table.find('td'); //Get All HTML td elements
// Save important data into new Array
for (var i = 0; i <= data.size() - 1; i = i + 4)
{
dataArray.push(data[i].textContent, data[i + 1].textContent, data[i + 2].textContent);
}
回答by Dave Rincon
When you create your table, put your td with class = "suma"
创建表时，将 td 与 class = "suma"
$(function(){
//funcion suma todo
var sum = 0;
$('.suma').each(function(x,y){
sum += parseInt($(this).text());
})
$('#lblTotal').text(sum);
// funcion suma por check
$( "input:checkbox").change(function(){
if($(this).is(':checked')){
$(this).parent().parent().find('td:last').addClass('suma2');
}else{
$(this).parent().parent().find('td:last').removeClass('suma2');
}
suma2Total();
})
function suma2Total(){
var sum2 = 0;
$('.suma2').each(function(x,y){
sum2 += parseInt($(this).text());
})
$('#lblTotal2').text(sum2);
}
});
回答by Zero Fiber
You can try with textContent.
您可以尝试使用 textContent。
var productId = val[key].textContent;
