jquery - 循环具有数据属性的表行

Question

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

    <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-* 元素的所有行，将它们添加到数组以及 qty 输入中？

Answer 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/

说明:

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