循环遍历具有数据属性的表行

Posted 2023-03-05

【中文标题】循环遍历具有数据属性的表行

【英文标题】：Loop over table rows that have a data attribute

【发布时间】：2014-12-18 16:19:55

【问题描述】：

我有一个显示产品代码的表格，客户可以在其中输入他们想要的数量。

    <tr data-code="TEST1" data-description="Test Product (EACH)" data-whqc="" >
      <td>
        TEST1
      </td>
      <td>
        Test Product (EACH)
      </td>
      <td>
        4
      </td>
      <td style="text-align: center">
        <input name="qty" type="text" class="qty" maxlength="5">
      </td>
    </tr>

表格中有很多行，我想将此数据发送到 AJAX 页面，以便我可以将这些产品添加到购物车。

如何循环遍历具有data-* 元素的表的所有行，将它们添加到数组以及数量输入中？

【参考方案1】：

var array = [];
    $("#tbl").find("tr[data-code]").each(function () 
        var qty = parseFloat($(this).find(".qty").val()) || 0;
        if (qty > 0) 
            array[array.length] = 
                Code: $(this).attr("data-code"),
                Description: $(this).attr("data-description"),
                Whqc: $(this).attr("data-whqc"),
                Qty: qty
            ;
        
    );

jsFiddle 演示在这里：http://jsfiddle.net/7kykjg2m/1/

解释：

创建空数组 遍历所有具有data-code 属性的TR 元素 将 qty 解析为浮点数（我使用浮点数，因为有时 qty 可以是分数，例如升油），但如果数量为空/空或 NaN，请使用 || 0 将 qty 设置为 0。李> 如果数量大于 0，则使用 JSON 将项目作为对象添加到数组中 完成后，使用 $.ajax() 或其他方式将数组数据传递给服务器/服务，但您没有提供这方面的详细信息，因此没有显示此代码。