Update counter after delete row from HTML Table using JavaScript in ASP.Net MVC

sangyongjin88
 
on Oct 25, 2021 11:00 PM
356 Views

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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Oct 26, 2021 07:09 AM

Hi sangyongjin88,

Refer below code.

Controller

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }
}

View

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
</head>
<body>
    <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="text-align:center">UPC </th>
            <th style="text-align:center">QTY</th>
            <th></th>
        </tr>
    </table>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <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() {
            var fname = document.getElementById('fname').value;
            var lname = document.getElementById('lname').value;

            var table = document.getElementsByTagName('table')[0];

            //var newRow = table.insertRow(table.rows.length / 100 + 1);
            var newRow = table.insertRow(-1);

            var cel1 = newRow.insertCell(0);
            var cel2 = newRow.insertCell(1);
            cel1.innerHTML = fname;
            cel2.innerHTML = lname;

            var newCell = newRow.insertCell(2);

            var newElem = document.createElement('input');
            newElem.setAttribute("id", "btn" + counter);
            newElem.setAttribute("type", "button");
            newElem.setAttribute("name", "COUNT" + counter);
            newElem.setAttribute("value", "Delete");
            newElem.setAttribute("onclick", 'SomeDeleteRowFunction(this)')
            newCell.appendChild(newElem);

            counter++;

            document.getElementById("fname").value = "";
            document.getElementById("lname").value = "1";
        }

        function SomeDeleteRowFunction(o) {
            var p = o.parentNode.parentNode;
            p.parentNode.removeChild(p);
            UpdateButtonCounter();
        }

        function UpdateButtonCounter() {
            counter = 0;
            $('#add-row tr:has(td)').each(function (i) {
                $(this).find('[id*=btn]').attr('name', 'COUNT' + i);
                $(this).find('[id*=btn]').attr('id', 'btn' + i);
                counter++;
            });
        }
    </script>
</body>
</html>