试图从表中获取正确的'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时，它就是表单本身而不是被单击的特定按钮。尝试在删除按钮上处理click事件，因为这样你就可以获得与按钮位于同一行的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/

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

Answer 2

尝试：

$('form').submit(function (e) {
    var itemName = $(e.target).parents('tr').children(":first-child").html();
    return confirm('Are you sure you want to delete ' + itemName + '?');
});