javascript - 从表格html中的一行中清除数据

Question

您好，我想清除表中的数据，但只清除一行而不删除该行。我一直在寻找一些代码，但我发现只是删除行什么是从 a 中清除数据tr并离开 td的最佳方法是tittle清除项目和任务

<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>

标签： javascriptjqueryhtml

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>