How to add entry row wise in html table dynamically?

Question

Please suggest how to insert records dynamically in html table row without removing previous rows by clicking add button method via Javascript .

JavaScript Function

function DataBind(dataList) {
    alert('working' + dataList.length);

    var SetData = $("#setdata");
    SetData.empty();

    for (var a = 0; a < dataList.length; a++) {
        var data = "<tr >" +

            "<th>" + dataList[a].Item_code + "</th>" +
            "<th>" + dataList[a].Item_Name + "</th>" +
            "<th>1</th> <th><button type='button'  onclick=\"addItem('" + dataList[a].Item_code + "','" + dataList[a].Item_Name + "')\" class='btn btn-primary'> <span class='glyphicon glyphicon-plus'/></button> <button type='button'  class='btnSelect'  class='btn btn-primary'> <span class='glyphicon glyphicon-minus'/></button></th>"
            + "</tr>";

        // alert(dataList[a].Acc_Cd);
        SetData.append(data);
    }
}



function addItem(val, name) {
    var table = document.getElementById("tablefinaldata");
    var row = table.insertRow(0);
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);
    var cell3 = row.insertCell(2);
    var cell4 = row.insertCell(3);

    var table2 = $("#setfinaldata");
    table2.empty();
    var Newdata = "<tr>" +
    "<th>" + val + "</th>" +
    "<th>"+ name +"</th>" +
    "<th>1</th>"
    + "</tr>";

    table2.append(Newdata);

}

Table in which records push

<table class="table table-responsive table-hover table-bordered" id="tablefinaldata">
    <thead>
        <tr>
            <td>
                <h5> Code</h5>
            </td>
            <td>
                <h5> Item</h5>
            </td>
            <td>
                <h5> Price</h5>
            </td>
            <td>
                <h5> Quantity</h5>
            </td>
        </tr>
    </thead>
    <tbody id="setfinaldata"></tbody>
</table>

Answer 1

You can use

element.appendChild

https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild

 document.addEventListener("click", function() { document.getElementById("tbl").appendChild(document.createElement("tr")); })

 table { width: 100%; background: pink; } tr { height: 10px; width: 100px; }

 <table id="tbl"> </table> <button>Add row</button>

OR

element.innerHTML

https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML

 document.addEventListener("click", function() { document.getElementById("tbl").innerHTML += "<tr></tr>" })

 table { width: 100%; background: pink; } tr { height: 10px; width: 100px; }

 <table id="tbl"> </table> <button>Add row</button>

Following this approach, your code could be written like below. This is an example of adding rows. The logic can be applied to adding columns or any dom element

 function DataBind(dataList) { var SetData = document.getElementById("setdata"); for (var a = 0; a < dataList.length; a++) { var data = `<tr> <td>${dataList[a].Item_code}</td> <td>${dataList[a].Item_Name}</td> <td>1</td> <td> <button type='button' onclick='addItem("${dataList[a].Item_code}","${dataList[a].Item_Name}")' class='btn btn-primary'> <span class='glyphicon glyphicon-plus'/>Add </button> <button type='button' class='btn btn-primary' onclick='removeItem("${dataList[a].Item_code}")'> <span class='glyphicon glyphicon-minus'/>Remove</button> </td> </tr>` SetData.innerHTML += data; } } DataBind([{ Item_code: "1", Item_Name: "Item1" }, { Item_code: "2", Item_Name: "Item2" }, { Item_code: "3", Item_Name: "Item3" } ]) function addItem(val, name) { var table2 = document.getElementById("setfinaldata"); var Newdata = ` <tr class="${val}"> <th>${val}</th> <th>${name}</th> <th>1</th> <th></th> </tr>`; table2.innerHTML += Newdata; } function removeItem(id) { const table = document.getElementById("setfinaldata"); const rows = document.getElementsByClassName(id); while (rows && rows.length > 0) { table.removeChild(rows[0]); } }

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <table class="table table-responsive table-hover table-bordered" id="tablefinaldata"> <thead> <tr> <td> <h5> Code</h5> </td> <td> <h5> Item</h5> </td> <td> <h5> Price</h5> </td> <td> <h5> Quantity</h5> </td> </tr> </thead> <tbody id="setfinaldata"></tbody> </table> <table id="setdata" class="table table-responsive table-hover table-bordered"></table>