1

我正在编写一个购物车类型功能，我在 $(.ajax) 调用中查询数据库中的许多项目（SKU、数量、名称）。我想显示一个表格，其中包含与用户正在寻找的所有项目相匹配的选项，用户可以在其中指定所需数量的选项。然后，他们可以单击“添加”将他们的选择添加到“购物车”。

这是一个简化的示例：

<table>
  <tr><td>Item A</td><td>SKU: 001</td><td>Qty: <input name="qty-sku001"> <input type="button" value="Add"></td></tr>
  <tr><td>Item B</td><td>SKU: 002</td><td>Qty: <input name="qty-sku002"> <input type="button" value="Add"></td></tr>
  <tr><td>Item C</td><td>SKU: 003</td><td>Qty: <input name="qty-sku003"> <input type="button" value="Add"></td></tr>
</table>

单击按钮时，仅从一行获取信息的理想方法是什么？我正在考虑添加一个 onclick="AddToCart(x);" 到每个按钮，但这只是传递一个 HTML 表单元素对象。我是否需要将每一行设为自己的表单，还是可以获取按钮的父 TR，然后从该行的输入和其他元素中获取值？

数据最终将被附加到“购物车”div 的表中，所以我需要从我的 ajax 调用中加载的三段数据。我想我可以为每一行添加隐藏元素，但必须有一个更高效、更优雅的解决方案。

谢谢！

4

2 回答 2

1

假设你使用 jQuery，你可以使用这个：

$("input[type=button]").click(function(evn){
    var rowName = $(this).prev().attr('name'); // this will give you the name attribute of element that is before the button in the DOM

    // do here whatever you need with rowName
});

编辑

您可以向按钮添加一个类，以防止为页面上的所有按钮运行此代码，如下所示：

<input class="row-button" type="button" value="Add">

并使用这个 javascript：

$(".row-button").click(function(evn){
    // the code from above
}
于 2012-08-07T00:06:20.840 回答
1 
$("input:button").click(function(){var $tr = $(this).closest('tr');});

$tr is the jquery row object that a button has been clicked

于 2012-08-07T00:16:33.080 回答