jQuery删除表格行而不删除rowspan列答案

【问题标题】：jQuery Remove table rows without removing the rowspan columnjQuery删除表格行而不删除rowspan列
【发布时间】：2017-03-03 06:50:15
【问题描述】：

我有一个以rowspan 为起始列的表。该表在每一行的末尾都有一个删除按钮。当单击该按钮时，相应的行将被删除。表格代码如下：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
 <table border="1" >
    <tr> <td rowspan="6" > First Section </td><td> Row 1-Col 1 </td> <td> Row 1 - Col 2 </td>  <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 2-Col 1 </td> <td> Row 2 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 3-Col 1 </td> <td> Row 3 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 4-Col 1 </td> <td> Row 4 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 5-Col 1 </td> <td> Row 5 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 6-Col 1 </td> <td> Row 6 - Col 2 </td> <td class="remove" > Delete </td> </tr>
 </table>
    
  
  
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $('.remove').on('click',function(){
            $(this).parent().remove();
        });
    </script>
</body>
</html>

当我点击第一行以外的行中的删除按钮时，它工作正常，但如果我点击第一行的删除按钮，它也会删除 rowspan 列。

如何在不删除rowspan列的情况下删除第一行？

【问题讨论】：

标签： jquery html html-table

【解决方案1】：

$('.remove').on('click', function() {
  if ($(this).closest("tr").index() == 0) {
    $(this).closest("tr").find("td:not(:nth-child(1))").remove();
  } else {
    $(this).closest("tr").remove();
  }

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td rowspan="6"> First Section </td>
    <td> Row 1-Col 1 </td>
    <td> Row 1 - Col 2 </td>
    <td class="remove"> Delete </td>
  </tr>
  <tr>
    <td> Row 2-Col 1 </td>
    <td> Row 2 - Col 2 </td>
    <td class="remove"> Delete </td>
  </tr>
  <tr>
    <td> Row 3-Col 1 </td>
    <td> Row 3 - Col 2 </td>
    <td class="remove"> Delete </td>
  </tr>
  <tr>
    <td> Row 4-Col 1 </td>
    <td> Row 4 - Col 2 </td>
    <td class="remove"> Delete </td>
  </tr>
  <tr>
    <td> Row 5-Col 1 </td>
    <td> Row 5 - Col 2 </td>
    <td class="remove"> Delete </td>
  </tr>
  <tr>
    <td> Row 6-Col 1 </td>
    <td> Row 6 - Col 2 </td>
    <td class="remove"> Delete </td>
  </tr>
</table>

检查点击的行是否在前，然后删除除第一个之外的所有其他 td
如果不是先删除整个 tr

【讨论】：

【解决方案2】：

改变你的表格结构，你的代码就可以工作了，看看小提琴

<table border="1" >
    <tr> <td rowspan="6" > First Section </td> </tr>
    <tr><td>
      <table  border="1">
        <tr>
        <td> Row 1-Col 1 </td> <td> Row 1 - Col 2 </td>  <td class="remove" > Delete </td></tr>
          <tr> <td> Row 2-Col 1 </td> <td> Row 2 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 3-Col 1 </td> <td> Row 3 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 4-Col 1 </td> <td> Row 4 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 5-Col 1 </td> <td> Row 5 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 6-Col 1 </td> <td> Row 6 - Col 2 </td> <td class="remove" > Delete </td> 
        </tr>
      </table>
    </td></tr>
 </table>

https://jsfiddle.net/oktnr85k/

【讨论】：

【解决方案3】：

使用siblings() 和not() 选择器。给rowspan 一些类，不要使用。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

  
 <table border="1" >
    <tr> <td rowspan="6" class='test' > First Section </td><td> Row 1-Col 1 </td> <td> Row 1 - Col 2 </td>  <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 2-Col 1 </td> <td> Row 2 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 3-Col 1 </td> <td> Row 3 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 4-Col 1 </td> <td> Row 4 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 5-Col 1 </td> <td> Row 5 - Col 2 </td> <td class="remove" > Delete </td> </tr>
    <tr> <td> Row 6-Col 1 </td> <td> Row 6 - Col 2 </td> <td class="remove" > Delete </td> </tr>
 </table>
    
  
  
    <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
    <script>
        $('.remove').on('click',function(){
            $(this).siblings().not('.test').remove();
            $(this).remove();
        });
    </script>
</body>
</html>

【讨论】：