Question

嗨，我想从一个表中清除数据，但仅清除一行而不删除该行。我正在寻找一些代码，但我发现只是删除行清除tr中的数据并留下td tittle的最佳方法是什么，只需清除Item和Task

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> 
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>

   
    
<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th></th>
      <th>Task</th>
      <th>Item</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td>tittle</td>
  <td data-name="task" class="task" data-type="text">task1</td>
  <td data-name="Item" class="Item" data-type="select">Item2</td>
  <td>  <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
  </tr>
    <tr>
  <td>tittle</td>
  <td data-name="task" data-disabled="true" class="task" data-type="text">task2</td>
  <td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
  <td>  <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
  </tr>
   <tr>
  <td>tittle</td>
  <td data-name="task" class="task" data-type="text">task3</td>
  <td data-name="Item" class="Item" data-type="select">Item3</td>
    <td>  <button id="delete" class="btn btn-sm btn-default">delete data</button></td>
  </tr>
  </tbody>
</table>

Answer 1

在单击时找到按钮的.parent()，然后使用.siblings()清除按钮的`.empty()'：

$('#table').on('click', '.delete', function() {
  $(this).parent('td')
    .siblings('.task, .Item') // or remove selectors to clear all siblings
    .empty();
});

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>



<table id="table" class="table table-bordered">
  <thead>
    <tr>
      <th>Id</th>
      <th>Task</th>
      <th>Item</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td data-name="task" class="task" data-type="text">001</td>
      <td data-name="Item" class="Item" data-type="select">Item2</td>
      <td><button class="delete btn btn-sm btn-default">delete data</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td data-name="task" data-disabled="true" class="task" data-type="text">002</td>
      <td data-name="Item" data-disabled="true" class="Item" data-type="select">Item1</td>
      <td><button class="delete btn btn-sm btn-default">delete data</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td data-name="task" class="task" data-type="text">003</td>
      <td data-name="Item" class="Item" data-type="select">Item3</td>
      <td><button class="delete btn btn-sm btn-default">delete data</button></td>
    </tr>
  </tbody>
</table>

Answer 2

如果您要完全删除该行：

## ```{r}
## x=sample(1)
## ```

要删除所有内容-包括$('#delete').click(function() { $(this).closest('tr').remove(); }); divs-：

th

仅删除每个单元格的内容：

$('#delete').click(function() {
    $(this).closest('tr').empty();
});

Answer 3

$("#table tr:nth-child(n) td").empty();

OR

$("#table tr:nth-child(n) td").html('');

清除表格html中一行的数据

3 个答案: