Question

我有一个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调用...我想我只需要帮助从表中获取值。

感谢。

Answer 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()
    }

});

Answer 2

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

Answer 3

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

在你的php循环中

：

<button class="deleteRecord" recordID="<?php echo $record['Id'] ?>">Delete Record</button>

在JQuery上

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

Answer 4

应该是.recordId，而不是recordId

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

Answer 5

您需要使用.来选择类recordId的元素。还可以使用text（）来获取值：

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

如何从表中删除行

5 个答案: