如何从表中删除一行答案

【问题标题】：How to remove a row from a table如何从表中删除一行
【发布时间】：2012-09-22 09:16:33
【问题描述】：

我有一个 html 表格，我想在每一行上添加一个删除按钮。当用户点击它时，我想做两件事：

1) 从表中删除该行。 2）从被删除的行中提取数据 - 一个特定的单元格，然后使用该值对将从数据库中删除记录的函数进行 ajax 调用。该函数返回一个新的项目列表，然后我将使用它来重新显示同一个表格。

我在 stackoverflow 上找到了其他人的以下帖子： How to remove current row from table in jQuery?

所以我猜这是第一点。但我不知道如何修改帖子所选答案中的代码以允许抓取行中的 id 值，然后进行 ajax 调用。

      <table class="table table-bordered table-striped"  id="databaserecords">
      <thead>
          <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Status</th>
              <th>Voice</th>
              <th>Jumbo</th>
              <th>Mode</th>
              <th>&nbsp;</th>
          </tr>
      </thead>
      <tbody>

          <?php foreach ($dblist as $record): ?>
              <tr>          
              <td class ='recordId'><?php echo $record['Id'] ?></td>
              <td class ='recordName'><?php echo $record['Name'] ?></td>
              <td><?php echo $record['Status'] ?></td>
              <td><?php echo $record['Voice'] ?></td>
              <td><?php echo $record['Jumbo'] ?></td>
              <td class='recordmode'><?php echo $record['Mode'] ?></td>
              <td><button id="deleteRecord">Delete Record</button></td>
            </tr>
          <?php endforeach ?>


 <script>

    $('#deleteRecord').live('click', function()  {

                //get a count of all records. only allowed to delete if you have more than one record.
                var recCount = $('#databaserecords tbody tr').length;

                if (recCount > 1)
                {
                    $thevalueIwanttoSave = $(this).closest('recordId').val();
                                alert($thevalueIwanttoSave);
                            }

    });

 </script>

现在，警报总是说我的变量未定义。你能为我指出正确的方向吗？我确实知道如何编写 ajax 调用...我想我只需要帮助来从表中获取值。

谢谢。

【问题讨论】：

标签： php jquery dom-manipulation

【解决方案1】：

你的选择器不正确。

$thevalueIwanttoSave = $(this).parent().siblings('.recordId').text();

closest 选择元素的最近父级（recordId 不是您的按钮元素的父级/祖父级或..），您还错过了类选择器的.。 val 用于获取/设置表单元素的值，对于 td 元素，您应该使用 text 或 html 方法。另请注意，ID 必须是唯一的（您可以改用类）并且不推荐使用 live 方法，您可以使用 on 方法。

$('#databaserecords').on('click', '.deleteRecord', function() { 

    var recCount = $('#databaserecords tbody tr').length;

    if (recCount > 1) {
        var text = $(this).parent().siblings('.recordId').text();
        alert(text);
        // $(this).closest('tr').remove()
    }

});

【讨论】：

【解决方案2】：

$thevalueIwanttoSave = $(this).parent('tr').find('.recordId').text();

【讨论】：

【解决方案3】：

应该是.recordId，而不是recordId

$thevalueIwanttoSave = $(this).closest('.recordId').val();
    alert($thevalueIwanttoSave);

【讨论】：

【解决方案4】：

在删除按钮的属性中添加 ID，您可以通过 jQuery 获取它。

在你的 php 循环中：

在 JQuery 上

$(".deleteRecord").click(function() {
    var id = $(this).attr("recordID");
    ...
});

【讨论】：

【解决方案5】：

您需要使用. 来选择具有类recordId 的元素。也可以使用 text() 来获取值：

$thevalueIwanttoSave = $(this).siblings('.recordId').text();
alert($thevalueIwanttoSave);

【讨论】：