Zeile löschen, Änderungen speichern, sobald ich Tabelle mit Javascript bearbeiten

Question

Jemand gepostet:
Making row editable when hit row edit button

ich ein Löschen/Bearbeiten/Speichern-Button schaffen wollte, so dass Person die Auftragsnummer eingeben und löschen oder die Daten bearbeiten .

Sequencing Schritte: auf Löschen: klicken I-Taste löschen, kommt die Aufforderung Feld, gebe ich , es löscht. Ich klicke auf Löschen, die Eingabeaufforderung wird angezeigt, ich gebe ein, löscht nicht .

jedoch: I-Taste klicken löschen, die Promptbox kommt, ich eingeben, löscht es . Ich klicke auf Löschen, die Eingabeaufforderung wird angezeigt, ich gebe 1 ein, löscht nicht .

bearbeiten Taste funktioniert, aber wenn ich auf die Schaltfläche Speichern klicken, wird es die Änderungen

https://jsfiddle.net/nhgjdr00/8/

HTML nicht speichern:

<table id="myTable" border="1"> 
<thead> 
<th>Order #</th> 
<th>Name</th> 
<th>Tea Order</th> 
<th>Tea Size</th> 
</thead> 

<tbody> 
<tr> 
<td class="rowNumber">1</td> 
<td>Shakespeare</td> 
<td>Iced</td> 
<td>Small</td> 
</tr> 
<tr> 
<td class="rowNumber">2</td> 
<td>Frost</td> 
<td>Hot</td> 
<td>Medium</td> 
</tr> 
</tbody> 
</table> 
<br> 
<input id="deleteRowBtn" type="button" value="Delete Row" /> 
<input id="editBtn" type="button" value="edt" /> 
<input id="saveBtn" type="button" value="saveChange" /> 
<br> 
<br> 
<form name="create"2 style="width:80px;"> 
Name:<input type="text" id="txtname" /> 
<br> 
Tea Order:<input type="text" id="txtTeaOrder" name="txtTeaOrder" /> 
<br> 
Tea Size<input type="text" id="txtTeaSize" name="txtTeaSize" /> 
<br> 
</form> 
</body> 

JS:

"use strict"; 
var orderNumberHolder=[]; // holds each order number 

// returns a html element (id) 
var $ = function(id) { 
return document.getElementById(id); 
}; 

function deleteRow() { 
var orderNumber = parseInt(prompt ("enter order number to delete")); 
if (orderNumber == NaN || orderNumber < 1) { 
prompt ("enter order number"); 
} else { 
var table = $("myTable"); 
var rowCount = table.rows.length; // eliminate header so minus 1 
for(var i=0, j=0; i<rowCount; i++, j++) { 
var row = table.rows[i]; 
if (orderNumber == i) { 
table.deleteRow(i); 
rowCount--; 
table.rows[j].cells[0].innerHTML = j; // renumbers the list after delete row 
} 
} 
} 
} 

function edt() { 
// converts number into integer 
var orderNumber = parseInt(prompt ("enter order number to edit")); 

// need to store order number so I can reference when I save edit info 
orderNumberHolder.push(orderNumber); 
if (orderNumber == NaN || orderNumber < 1) { 
prompt ("enter order number"); 
} else { 
var table = $("myTable"); 
var rowCount = table.rows.length; 

// i is index, so start with 1 so it doesn't include header 
for(var i=1; i<rowCount; i++) { 
var row = table.rows[i]; 
if (orderNumber == i){ 
$("txtname").value = table.rows[i].cells["1"].innerHTML; 
$("txtTeaOrder").value = table.rows[i].cells["2"].innerHTML; 
$("txtTeaSize").value = table.rows[i].cells["3"].innerHTML; 
} 
} 
} 
} 

function saveChange() { 
var table = $("myTable"); 
var rowCount = table.rows.length; // do not want to include header 

for(var i=1; i<rowCount; i++) { 
var row = table.rows[i]; 
if (orderNumberHolder[i] == i){ 
table.rows[i].cells["1"].innerHTML = $("txtname").value ; 
table.rows[i].cells["2"].innerHTML = $("txtauthor").value; 
table.rows[i].cells["3"].innerHTML = $("txtcdate").value; 
$("txtname").value = ''; 
$("txtauthor").value = '';      
$("txtcdate").value = '' ; 
rowCount--; 
} 
} 
} 

window.onload = function() { 
$("deleteRowBtn").onclick = deleteRow; // calls function 
$("editBtn").onclick = edt; // calls function 
$("saveBtn").onclick = saveChange; // calls function 
} 

Ich würde jede su schätzen Empfehlungen.

Answer 1

Sie nehmen die Zeilennummer und löschen diese Zeile. Wenn Sie die erste Zeile löschen, ändert sich die Zeilennummer des vorhandenen Elements, dh (Auftrag Nr. 2), von 1 auf 1. Wenn Sie also 2 eingeben, gibt es keine zu löschende Zeile.