I want to update the counter number in order even though delete row
right now my code like 1,2,3,4,5 After I delete the row. 1,2,4,5
so after i delete one of rows it will update Button name for all rows, so that I can insert values to Sql server using array.
<input name="Table[0].Item_name" style="width: 250px;height: 30px;">
<input name="Table[1].Item_name" style="width: 250px;height: 30px;">
<input name="Table[2].Item_name" style="width: 250px;height: 30px;">
<input name="Table[3].Item_name" style="width: 250px;height: 30px;">
<input name="Table[4].Item_name" style="width: 250px;height: 30px;">
id i delete Table[2], i want to update all Name values in order. like that:
<input name="Table[0].Item_name" style="width: 250px;height: 30px;">
<input name="Table[1].Item_name" style="width: 250px;height: 30px;">
<input name="Table[2].Item_name" style="width: 250px;height: 30px;">
<input name="Table[3].Item_name" style="width: 250px;height: 30px;">
<h1>Physical Inventory Count</h1>
UPC :
<input type='text' name="fname" id="fname" />
<br />
<br />
QTY :
<input type='text' name="lname" id="lname" value="1" />
<br />
<br />
<br />
<br />
<input type='button' id='btnSubmit' onclick="addRow();" Value=' Submit' />
<br />
<br />
<br />
<table border="1" style="font-size:14px;" id="add-row">
<tr>
<th style="width:90%; text-align:center">UPC </th>
<th style="width:90%; text-align:center">QTY</th>
</tr>
</table>
@section Scripts {
<script type="text/javascript">
$(document).ready(function () {
$('input:text:first').focus();
$('input:text').bind("keydown", function (e) {
var n = $("input:text").length;
var input = document.getElementById('lname');
if (e.which == 13) { //Enter key
e.preventDefault(); //to skip default behavior of the enter key
var nextIndex = $('input:text').index(this) + 1;
if (nextIndex < n) {
$('input:text')[nextIndex].focus();
$('input:text')[nextIndex].select();
}
else {
$('input:text')[nextIndex - 1].blur();
$('#btnSubmit').click();
$('input:text:first').focus();
}
}
});
$('#btnSubmit').click(function () {
alert('Form Submitted');
});
});
var counter = 0;
function addRow() {
// get input values
var fname = document.getElementById('fname').value;
var lname = document.getElementById('lname').value;
var newElem = document.createElement('input');
// get the html table
// 0 = the first table
var table = document.getElementsByTagName('table')[0];
// add new empty row to the table
// 0 = in the top
// table.rows.length = the end
// table.rows.length/2+1 = the center
var newRow = table.insertRow(table.rows.length / 100 + 1);
// add cells to the row
var cel1 = newRow.insertCell(0);
var cel2 = newRow.insertCell(1);
var newCell = newRow.insertCell(2);
// add values to the cells
cel1.innerHTML = fname;
cel2.innerHTML = lname;
document.getElementById("fname").value = "";
document.getElementById("lname").value = "1";
newElem = document.createElement('input');
newElem.setAttribute("type", "button");
newElem.setAttribute("name", "COUNT" + counter);
newElem.setAttribute("value", "Delete Row");
newElem.setAttribute("onclick", 'SomeDeleteRowFunction(this)')
newCell.appendChild(newElem);
counter++; // I want to update this Counter number in order.
}
window.SomeDeleteRowFunction = function SomeDeleteRowFunction(o) {
var p = o.parentNode.parentNode;
p.parentNode.removeChild(p);
}
</script>