Tabellenzeile wird überhaupt nicht gelöscht

Ich muss den gesamten Tabelleninhalt außer dem Kopf und der Anfangszeile löschen, in der der Benutzer Elemente eingeben kann. Ich führe eine Schleife über die Tabellenlänge, die jede Zeile löscht, die nicht mit der ID der zwei Zeilen übereinstimmt, die ich ausschließen möchte. Es gibt eine Zeile, die nicht mit der Ausnahme in der if-Anweisung übereinstimmen sollte, aber NEVER gelöscht werden. Was ist das Problem? HierTabellenzeile wird überhaupt nicht gelöscht

ist die HTML (bitte nicht die <script src="myscript.js"></script>, die Sie benötigen bearbeiten):

<HTML> 
<body> 
<div id="wrapper"> 
<table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1> 

<tbody><tr id="head"> 
<th>Name</th> 
<th>Type</th> 
<th>Action</th> 
</tr> 

<tr id="row-1"> 
<td id="col-1">AAAA</td><td id="col-2">A</td> 
<td id="col-3"> 
    <button type="button" class="edit-button" id="edit-button-1">Edit</button> 
    <button type="button" class="save-button" id="save-button-1">Save</button> 
    <button type="button" class="delete-button" id="delete-button-1">Delete</button> 
</td> 
</tr> 

<tr id="row-3"><td id="col-1">BBB</td> 
<td id="col-2">B</td><td id="col-3"> 
    <button type="button" class="edit-button" id="edit-button-3">Edit</button> 
    <button type="button" class="save-button" id="save-button-3">Save</button> 
    <button type="button" class="delete-button" id="delete-button-3">Delete</button> 
</td> 
</tr> 

<tr id="initial-row"> 
<td><input id="text-field" type="text"></td> 

<td> 
    <select name="levels-list" id="levels-list"> 
    <option value="A" id="option-1">A</option> 
    <option value="B" id="option-2">B</option> 
    <option value="C" id="option-3">C</option> 
    </select> 
</td> 

<td><input class="add" id="add-button" value="Add" type="button"></td> 
</tr> 
<script src="myscript.js"></script> 
</tbody> 

</table> 
</div> 
</HTML>

Hier ist das Skript:

var table = document.getElementById("data_table"); 
for(var y=0; y<table.rows.length; y++) 
    { 
    console.log("deleting row "+ y); 

    if ((table.rows[y].id!= "initial-row") && (table.rows[y].id!= "head")) 
    { 
     console.log("inside if statement"); 
     table.deleteRow(y); //delete the row 
     console.log("row deleted"); 
    } 
    else{ console.log("inside else. row is not deleted.");} 

    }//end for 

console.log(table.innerHTML);

EDIT: Um zu klären, was ich Tatsächlich ist es so, dass die Tabelle Zeilen enthält, denen folglich ids zugeordnet sind (Zeile-1, Zeile-2, Zeile-2, Zeile-3). Die Tabelle basiert auf Elementen, die von einem Array gelesen werden. Es gibt eine Schaltfläche zum Löschen. Wenn ein Element gelöscht wird, lösche ich es mit table.deleteRow(rowindex); und lösche die Werte dieser Zeile aus einem Array. Die Tabellenzeilen-IDs werden nach dem Löschen nicht aufeinanderfolgend. Daher möchte ich alle Zeilen mit Ausnahme der ursprünglichen Zeilen (den Kopf und die ursprüngliche Eingabe) löschen und die IDs erneut berechnen und die neue Tabelle mit neuen IDs nach den gelöschten Elementen erstellen. Die Tabellenzeilen werden in der Reihenfolge ihrer Reihenfolge ohne Lücken angezeigt. Das ist wichtig für mich.

Quelle

2017-05-29 user7945230

mich ausschließen Angenommen, Sie haben beim Löschen von Zeilen tatsächlich die Anzahl aller folgenden Zeilen geändert. Angenommen, es gibt vier Zeilen in Ihrer Tabelle und Sie löschen die zweite (y = 2), die dritte wird die zweite und die vierte wird die dritte. Dann wird y zu 3 und Sie löschen die neue dritte Zeile, die die vierte war. Daher wird die neue zweite/alte dritte Zeile niemals gelöscht ... Sie sollten stattdessen eine while-Schleife verwenden und y nur erhöhen, wenn Sie keine Zeile gelöscht haben. –

@Johannes Lemonde danke. Aber deine Lösung hat nicht geholfen. Es führte einen Fehler ein, der besagt, dass "table.rows [y] nicht definiert ist". – user7945230

Ihr Hauptproblem ist, dass die Indizierung Änderungen, wie Sie Zeilen entfernen. Wenn Sie einen in einer for() - Schleife entfernen, müssen Sie auch y ändern. Oder arbeiten Sie umgekehrt, wenn Sie Zeilen von unten entfernen, ändert sich die Indizierung nicht.

Ein sauberer Ansatz ist die Kopfzeile zu einem <thead> bewegen und verwenden querySelectorAll() die Zeilen, die Sie in der tbody entfernen mögen auszuwählen und not() verwenden, um die Anfangsreihe

var table = document.getElementById("data_table"); 
 
var rowstoDelete = table.querySelectorAll('tbody tr:not(#initial-row)'); 
 

 
[].slice.call(rowstoDelete).forEach(function(row) { 
 
    row.remove() 
 
});

<div id="wrapper"> 
 
    <table align='center' cellspacing=2 cellpadding=5 id="data_table" border=1> 
 
    <thead> 
 
     <tr id="head"> 
 
     <th>Name</th> 
 
     <th>Type</th> 
 
     <th>Action</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr id="row-1"> 
 
     <td id="col-1">AAAA</td> 
 
     <td id="col-2">A</td> 
 
     <td id="col-3"> 
 
      <button type="button" class="edit-button" id="edit-button-1">Edit</button> 
 
      <button type="button" class="save-button" id="save-button-1">Save</button> 
 
      <button type="button" class="delete-button" id="delete-button-1">Delete</button> 
 
     </td> 
 
     </tr> 
 

 
     <tr id="row-3"> 
 
     <td id="col-1">BBB</td> 
 
     <td id="col-2">B</td> 
 
     <td id="col-3"> 
 
      <button type="button" class="edit-button" id="edit-button-3">Edit</button> 
 
      <button type="button" class="save-button" id="save-button-3">Save</button> 
 
      <button type="button" class="delete-button" id="delete-button-3">Delete</button> 
 
     </td> 
 
     </tr> 
 

 
     <tr id="initial-row"> 
 
     <td> 
 
      <input id="text-field" type="text"> 
 
     </td> 
 

 
     <td> 
 
      <select name="levels-list" id="levels-list"> 
 
      <option value="A" id="option-1">A</option> 
 
      <option value="B" id="option-2">B</option> 
 
      <option value="C" id="option-3">C</option> 
 
      </select> 
 
     </td> 
 

 
     <td> 
 
      <input class="add" id="add-button" value="Add" type="button"> 
 
     </td> 
 
     </tr> 
 

 
    </tbody> 
 

 
    </table> 
 
</div>

Quelle

2017-05-29 19:59:10 charlietfl

Vorausgesetzt, Sie haben ein passendes '' Element für die Überschriftenelemente verwendet, die Zeilen, die nicht gelöscht werden sollten, wäre es nicht einfacher, das vorhandene '' durch ein frisches oder sonst leeres ' zu ersetzen 'Element als alternativer Ansatz? (Ich überlegte, ob ich eine Antwort posten sollte, aber offen gesagt, sobald der OP den Grund für das Problem verstanden hat, ist die Antwort bereits geschrieben, trotz der Möglichkeit weiterer Lösungen.) ** Edit ** mein Schlechter, ich habe das '#initial nicht gesehen an anderer Stelle.Obwohl das immer noch zu einem '' Element hinzugefügt werden könnte, die gleiche Lösung ... –

@DavidThomas yeah ... geben Haupt tbody eine ID sogar und einfach leer, hatte nicht daran gedacht. Ich denke, dass OP davon profitieren wird, andere Ansätze zu lernen, Elemente aus der Antwort zu wählen, obwohl auch – charlietfl

@charlietfl, aber das entfernt den Tabellenkopf, wenn ich es nach dem Hinzufügen von Daten ausführen und klicken Sie auf Löschen. Wie kannst du 'tbody tr: nicht (# initial-row)' außer tr mit id "head" machen? – user7945230

-1

Ich bin nicht wirklich in der Modifizierung des DOM so und ich kann mir vorstellen, dass nicht alle Browser diese Möglichkeit zum Entfernen einer Zeile unterstützen. Ich würde wirklich vorschlagen, alle Zeilen zu geben, die Sie eine Extraklasse löschen wollen, so dass es einfach sein würde, sie zu entfernen, wenn mit jQuery

$('#table-selector-by-id').find ('.to-be-deleted').remove();

Quelle

2017-05-29 19:31:43 Huupke

Es gibt keine jQuery-Methode 'select()'. Außerdem sollten Sie keine Fragen beantworten, die nicht mit jQuery-Code jQuery markiert sind – charlietfl

Fair genug. Verwerfe meine Antwort. – Huupke

Tabellenzeile wird überhaupt nicht gelöscht

Antwort

Verwandte Themen