Question

我有这个表结构，用于使用jQuery动态构造表。

<table class="table table-hover" id="paper-table"><thead><tr><td><b>Pubmed ID</b></td><td><b>Title</b></td><td><b>Year</b></td><td><b>Journal</b></td><td></td></tr></thead>
<tbody>
    <tr>
    <td> id </td>
    <td> title </td>
    <td> year </td>
    <td> journal </td>
    <td><a href="#" class="delete-row"><span class="glyphicon glyphicon-trash"></span></a></td>
    </tr>
</tbody>
<tfoot><tr><span id="table-title">Paper</span></tr></tfoot></table>

每行的最后一列是垃圾桶图标，我想点击该图标以删除用户点击的行。该表构造正确，但我需要一个jQuery函数，允许我删除该行。此外，它应该在删除一个表后检查表是否没有更多行，如果没有更多行则删除表。看一些其他帖子，我发现我可以通过做这样的事情来删除表格

$('#paper-table').on('click', 'a', function(){
    $(this).closest('tr').remove();
});

但是当我点击垃圾桶图标时它不起作用。我错过了什么吗？

Answer 1

您链接的代码会删除锚标记所在的行，但不会删除该表。如果您的问题是如何删除表格，则必须检查是否没有更多行，然后删除表格，例如 -

$('#paper-table').on('click', 'a', function() {
  $(this).closest('tr').remove();

  //check if no more rows and remove the table
  if ($('#paper-table tbody tr').length == 0) {
    $('#paper-table').remove();
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table class="table table-hover" id="paper-table">
  <thead>
    <tr>
      <td><b>Pubmed ID</b>
      </td>
      <td><b>Title</b>
      </td>
      <td><b>Year</b>
      </td>
      <td><b>Journal</b>
      </td>
      <td></td>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td><span id="table-title">Footer</span>
      </td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>id</td>
      <td>title</td>
      <td>year</td>
      <td>journal</td>
      <td><a href="#" class="delete-row">del</a>
      </td>
    </tr>
    <tr>
      <td>id</td>
      <td>title</td>
      <td>year</td>
      <td>journal</td>
      <td><a href="#" class="delete-row">del</a>
      </td>
    </tr>
  </tbody>
</table>

Answer 2

请参阅jsfiddle了解工作演示。以下是代码:(已添加额外行以进行测试）

<强> HTML

<table class="table table-hover" id="paper-table">
 <thead>
  <tr>
   <th>Pubmed ID</th>
    <th>Title</th>
   <th>Year</th>
  <th>Journal</th>
 </tr>
 </thead>
<tbody>
<tr>
<td> id 1 </td>
<td> title 1</td>
<td> year 1</td>
<td> journal 1</td>
<td><a href="#" class="delete-row" onclick="deleteThis(this)"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td> id 2</td>
<td> title2 </td>
<td> year 2</td>
<td> journal 2</td>
<td><a href="#" class="delete-row"  onclick="deleteThis(this)"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
<tr>
<td> id 3</td>
<td> title 3 </td>
<td> year 3</td>
<td> journal 3</td>
<td><a href="#" class="delete-row"  onclick="deleteThis(this)"><span class="glyphicon glyphicon-trash"></span></a></td>
</tr>
</tbody>
<tfoot><tr><span id="table-title">Paper</span></tr></tfoot></table>

<强> JS

function deleteThis(obj){
    $(obj).closest('tr').remove();
}

通过使用jquery单击单元格上的按钮来删除行

2 个答案: