如何在html表中动态添加条目行？

Question

请建议如何通过Javascript点击添加按钮方法在html表格行中动态插入记录而不删除以前的行。

JavaScript 函数

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 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

你可以使用

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>

或

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>

按照这种方法，您的代码可以编写如下。这是添加行的示例。该逻辑可以应用于添加列或任何 dom 元素

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>