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>

ボタンがクリックされたときに、1行だけから情報を取得する理想的な方法は何ですか? onclick="AddToCart(x);" を追加することを考えていました 各ボタンに渡されますが、それは HTML Form Element オブジェクトを渡すだけです。各行を独自のフォームにする必要がありますか?それとも、ボタンの親 TR を取得して、その行の入力やその他の要素から値を取得できますか?

データは最終的に "Cart" div のテーブルに追加されるため、ajax 呼び出しから読み込んだ 3 つのデータが必要になります。各行に非表示の要素を追加できると思いますが、より効率的で適切な解決策が必要です。

ありがとう！

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 は、ボタンがクリックされた jquery 行オブジェクトです

于 2012-08-07T00:16:33.080 に答える