使用JavaScript編輯表格后，刪除行，保存更改

Question

有人張貼：
當點擊行編輯按鈕時使行可編輯

我想創建一個刪除/編輯/保存按鈕，以便其他人可以輸入訂單號並刪除或編輯數據。

排序步驟： 在Delete上：單擊Delete按鈕，出現提示框，輸入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

您正在獲取行號並刪除該行。 當u刪除第一行時，現有元素的行號（第2號）從2變為1。因此，在提示符下輸入2時，沒有要刪除的行。