尝试从表中获取正确的“td:nth-child(1)”值

Question

我正在学习一些 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>

谢谢你的帮助！

Answer 1

您的代码在表单的提交事件上运行，因此当您使用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/

但请注意，当提交表单时，您需要对要删除的值执行某些操作，例如，将其放入表单内的隐藏字段中。您没有在问题中显示表单的其余部分，但看起来您拥有的唯一表单元素是删除按钮。