jQuery删除表行不删除rowspan列

问题描述：

我有一个rowspan作为起始列的表。该表在每行的末尾有一个删除按钮。当单击该按钮时，相应的行将被删除。代码表低于：jQuery删除表行不删除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列的情况下删除第一行？

答

改变结构将努力看看小提琴

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

答

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

答

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

jQuery删除表行不删除rowspan列

相关推荐