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

您的代码在form的 submit 事件上运行，因此当您使用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 回答