Question

我有一个以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列？

Answer 1

＆＃13;

$('.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();
  }

});

＆＃13;

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

＆＃13;

检查点击的行是否是第一个，然后删除除第一个
如果不是先删除整个tr

Answer 2

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

Answer 3

更改表格的结构，你的代码可以看小提琴

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

jQuery删除表行而不删除rowspan列

3 个答案: