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

Posted 2023-05-08

【中文标题】如何在html表中动态添加条目行？

【英文标题】：How to add entry row wise in html table dynamically?

【发布时间】：2020-02-21 16:41:27

【问题描述】：

请建议如何通过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>

【问题讨论】：

Add table row in jQuery的可能重复

是否有可能当行的所有单元格都被填满然后转移到下一行？

请建议步骤

【参考方案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>