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列的情況下刪除第一行？

來源

2017-03-03 codegeek

改變結構將努力看看小提琴

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

來源

2017-03-03 07:02:32 yogesh84

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

來源

2017-03-03 06:55:58 guradio

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

來源

2017-03-03 07:02:29

jQuery刪除錶行不刪除rowspan列

回答

相關問題