Supprimer la ligne, Enregistrer les modifications une fois que je modifier table en utilisant Javascript

Question

Quelqu'un a posté ceci:
Making row editable when hit row edit button

Je voulais créer un supprimer/modifier/bouton de sauvegarde afin que personne ne peut entrer dans le numéro de commande et supprimer ou modifier les données .

étapes de séquençage: sur Supprimer: I cliquez sur Supprimer bouton, la boîte rapide arrive, j'entre , il supprime . Je clique sur le bouton de suppression, la boîte de dialogue apparaît, j'entre , il ne supprime pas .

Cependant: je clique sur le bouton supprimer, la boîte rapide vient, j'entrer , il supprime . Je clique sur le bouton de suppression, la boîte de dialogue s'affiche, j'entre 1, elle ne supprime pas .

Modifier bouton fonctionne, mais quand je clique sur le bouton Enregistrer, il ne sera pas enregistrer les modifications

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

HTML:

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

J'apprécierais tout su ggestions.

Answer 1

Vous prenez le numéro de ligne et supprimez cette ligne. Lorsque vous supprimez la première ligne, le numéro de la ligne de l'élément existant (par exemple, n ° 2) passe de 1 à 2. Par conséquent, lorsque vous entrez 2 dans l'invite, il n'y a pas de ligne à supprimer.