循环遍历每个 HTML 表格列并使用 jQuery 获取数据

Question

我正在尝试获取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>

现在，我正在循环并尝试获取<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 = ?
            });
        });

但是，我无法获取每一行的值（HTML文本）。我想将这些值分配给本地变量。另外，我不想获取每行中的按钮（其中包含按钮的innerHTML）。

- Idrees Khan

Answer 1

使用嵌套的.each()意味着你的内部循环一次只处理一个元素，因此你不能在内部循环中同时设置productId和product和quantity。

此外，使用function(key, val)然后使用val[key].innerHTML是不正确的： .each() 方法 传递索引（一个整数）和实际元素，因此你应该使用function(i, element) 然后使用element.innerHTML。不过jQuery也会将this设置为当前元素，所以你可以直接使用this.innerHTML。

无论如何，这里是一种让它正常工作的方法:

    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
    });

示例：http://jsfiddle.net/bqX7Q/

- nnnnnn

---

我有类似的需求，并基于这个答案创建了这个jsfiddle：https://jsfiddle.net/kershaw/o3bh6kxc/30/ - Kershaw

Answer 2

试一试

    $("#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())
    });

- sangram parmar

---

它只能使用html()函数工作吗？我尝试在记录上使用其他函数，例如val()和attr()，但没有任何作用。问题是什么？ - Asqan

Answer 3

我的第一篇文章...

我尝试了这个方法：将“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);
}

- Jurgen

Answer 4

当您创建表格时，请将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);                                              
   }                                                                      
});

Complete Example

- Dave Rincon

---

为了保持网站的清洁，尽量避免使用缩写，如用“ur”代替“your”，用“u”代替“you”等。 :) 谢谢！ - AHiggins

Answer 5

你可以尝试使用 textContent。

var productId = val[key].textContent;

- Zero Fiber