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>

Possible duplicate of [Add table row in jQuery](https://stackoverflow.com/questions/171027/add-table-row-in-jquery) — Malavan, Oct 25 '19 at 11:01
Is it possible that when all cell of row is filled then shifted to next row? — Haris Ali Khan, Oct 25 '19 at 11:31

score 0 · Answer 1 · answered Oct 25 '19 at 16:15

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>

How to add entry row wise in html table dynamically?

1 Answers1