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

【问题标题】：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-* 元素的表的所有行，将它们添加到数组以及数量输入中？

【问题讨论】：

标签： jquery json ajax html-table

【解决方案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() 或其他方式将数组数据传递给服务器/服务，但您没有提供这方面的详细信息，因此没有显示此代码。

【讨论】：