我有一个显示产品代码的表格,客户可以在其中输入他们想要的数量。
<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 输入中?
最佳答案
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 解析为 float (我使用 float 因为有时 qty 可以是小数,例如石油升数),但使用
|| 0
如果数量为空/null 或NaN
,则将qty
设置为 0。 - 如果数量大于 0,则使用 JSON 将项目作为对象添加到数组中
- 完成后,使用 $.ajax() 或其他方式将数组数据传递到服务器/服务,但您没有提供这方面的详细信息,因此没有显示这方面的代码.
关于jquery - 循环具有数据属性的表行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26520625/