使用 Javascript 编辑表格后删除行，保存更改

Question

有人发布了这个：
Making row editable when hit row edit button

我想创建一个删除/编辑/保存按钮，以便人们可以输入订单号并删除或编辑数据。

测序步骤： 删除时： 点击删除按钮，弹出提示框，输入1，删除1。 我点击删除按钮，弹出提示框，我输入2，不删除2。

但是： 点击删除按钮，弹出提示框，输入2，删除2。 我点击删除按钮，出现提示框，我输入1，不删除1。

编辑按钮有效，但是当我点击保存按钮时，它不会保存更改

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
}

如果有任何建议，我将不胜感激。

Answer 1

您正在获取行号并删除该行。当您删除第一行时，现有元素的行号即（订单＃2）从2更改为1。因此，当您在提示符中输入2时，没有要删除的行。