1

私はいくつかのJQueryの基本を学んでいて、この特定の状況に困惑しています。各行の最後に削除ボタンがある基本的なテーブルがあり、[削除]ボタンをクリックした行に応じて、JQueryコードに列1の値を認識させようとしています。実際に表示されている行に関係なく、最初の行の値が表示され続けます。

これがテーブルの私のコードです：

     <table id="DemoTable">
        <thead><tr><th>Product</th><th>Price</th></tr></thead>
        <tr><td>Sirloin Steak 10 oz.</td><td>8.77</td><td><input type="submit" value="Delete" /></td></tr>
        <tr><td>Filet Mignon 8 oz.</td><td>14.50</td><td><input type="submit" value="Delete" /></td></tr>
        <tr><td>Redi-Grill 5 oz.</td><td>1.55</td><td><input type="submit" value="Delete" /></td></tr>
        <tr><td>San Marco Stuffed Shells</td><td>.35</td><td><input type="submit" value="Delete" /></td></tr>
        <tr><td>Sliced Cheese Yellow</td><td>.10</td><td><input type="submit" value="Delete" /></td></tr>
    </table>

そしてここにJQueryセクションがあります：

<script type="text/javascript">
  $(document).ready(function () {
    $('form').submit(function () {
        var itemName = $('td:nth-child(1)', this).html();
        return confirm('Are you sure you want to delete ' + itemName + '?');
    });
  });
</script>

助けてくれてありがとう！

4

2 に答える 2

4

コードはフォームの送信イベントで実行されているため、使用するthis場合は、クリックされた特定のボタンではなく、フォーム自体です。ボタンと同じ行にあるtdを取得できるため、削除ボタンのクリックイベントを処理してみてください。

$('#DemoTable input[type="submit"]').click(function() {
   var itemName = $(this).closest("tr").children().eq(0).html();
   return confirm('Are you sure you want to delete ' + itemName + '?');
});

デモ： http： //jsfiddle.net/nnnnnn/VxWUJ/

ただし、フォームが送信されたときに、削除する値を使用して何かを行う必要があることに注意してください。たとえば、フォーム内の非表示フィールドに入力します。質問にはフォームの残りの部分は表示されませんが、フォーム要素は削除ボタンだけのようです。

于 2012-08-08T21:37:21.037 に答える
1

試す：

$('form').submit(function (e) {
    var itemName = $(e.target).parents('tr').children(":first-child").html();
    return confirm('Are you sure you want to delete ' + itemName + '?');
});
于 2012-08-08T21:33:04.207 に答える