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

Posted 2023-02-22

【中文标题】循环遍历每个 HTML 表列并使用 jQuery 获取数据

【英文标题】：Loop Through Each HTML Table Column and Get the Data using jQuery

【发布时间】：2013-06-11 19:40:36

【问题描述】：

我正在尝试获取 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（在每一行中）

【参考方案1】：

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

Ejemplo completo

【讨论】：

为了保持网站整洁，尽量避免使用“ur”而不是“your”、“u”或“you”等简写形式。:) 谢谢！

【参考方案2】：

我的第一篇文章...

我试过这个：将 '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);

【参考方案3】：

使用嵌套的.each() 意味着您的内部循环一次执行一个 td，因此您不能将productId 和product 和quantity 全部设置在内循环中。

同时使用function(key, val) 然后val[key].innerHTML 是不正确的：.each() method 传递索引（一个整数）和实际元素，所以你会使用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/

【讨论】：

我有类似的需求，并根据这个答案制作了这个 jsfiddle：jsfiddle.net/kershaw/o3bh6kxc/30

【参考方案4】：

试试这个

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

【讨论】：

它是否仅适用于 html() 函数？我尝试在记录上使用其他函数，例如 val() 和 attr() 但没有任何效果。究竟是什么问题？

【参考方案5】：

您可以尝试使用 textContent。

var productId = val[key].textContent;