Someone posted this:
Making row editable when hit row edit button
I wanted to create one delete/edit/save button so that person can enter the order number and delete or edit the data.
Sequencing steps: On Delete: I click delete button, the prompt box comes up, I enter 1, it deletes 1. I click delete button, the prompt box comes up, I enter 2, it does not delete 2.
However: I click delete button, the prompt box comes up, I enter 2, it deletes 2. I click delete button, the prompt box comes up, I enter 1, it does not delete 1.
Edit Button works, but when I click on the save button, it won't save the changes
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
}
I would appreciate any suggestions.
