jQuery Tabellenzeilen entfernen, ohne die rowspan-Spalte zu entfernen

Ich habe eine Tabelle mit rowspan als Startspalte. Die Tabelle hat am Ende jeder Zeile eine Schaltfläche zum Löschen.Wenn Sie auf die Schaltfläche klicken, wird die entsprechende Zeile gelöscht. Code für die Tabelle ist unten:jQuery Tabellenzeilen entfernen, ohne die rowspan-Spalte zu entfernen

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

Wenn ich auf den Löschen-Tasten in den Reihen andere als die erste Zeile, die es funktioniert gut, aber wenn ich auf die Schaltfläche zum Löschen der ersten Zeile löschen Sie auch die rowspan Spalte.

Wie lösche ich die erste Zeile, ohne die rowspan Spalte zu löschen?

Quelle

2017-03-03 codegeek

Änderung Struktur der Tabelle und der Code wird an Geige Blick arbeiten

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

Quelle

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>

prüft, ob die angeklickt Zeile zuerst, dann alle anderen td außer
zuerst entfernen, wenn nicht zuerst gesamte tr entfernen

Quelle

2017-03-03 06:55:58 guradio

Verwenden siblings() und not() Selektor . Geben Sie eine Klasse für rowspan nicht verwenden.

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

Quelle

2017-03-03 07:02:29

jQuery Tabellenzeilen entfernen, ohne die rowspan-Spalte zu entfernen

Antwort

Verwandte Themen