如何通过 Javascript 函数在 table 中插入行

Question

我正在尝试将另一行插入带页脚的 table。

这是我的代码：

function submit(){
        /* Some code here with declarations & value assignings*/

        let tble = document.getElementById("tabl");
        
        let newEl = document.createElement("tr");
        newEl.innerHTML="<td>"+nowSr+"</td> <td>"+taskForm+"</td> <td>"+tagForm+"</td> <td>Rs. "+amountForm+"</td>";

        tble.appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild);
       }

我的函数给出了以下结果：

如您所见（IN INSPECT ELEMENTS WINDOW），新行插入到页脚之后。如何正确添加

在 table 的最后一行之后?

Answer 1

不要将元素直接插入 <table> 元素，而是 select <tbody>。

你可以这样做：

function submit(){
  let tble = document.getElementById("tabl");
        
  let newEl = document.createElement("tr");
  newEl.innerHTML="<td>"+nowSr+"</td> <td>"+taskForm+"</td> <td>"+tagForm+"</td> <td>Rs. "+amountForm+"</td>";

  tble.querySelector('tbody').appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild);
}

但是您不应该使用 innerHTML 来创建行（它可能会产生 XSS 漏洞），而是使用 innerText 或 textContent。但这意味着您必须以不同的方式创建 <td>：

function submit(){
  let tble = document.getElementById("tabl");
        
  let newEl = document.createElement("tr");
  appendTD(newEl, nowSr);
  appendTD(newEl, taskForm);
  appendTD(newEl, tagForm);
  appendTD(newEl, "Rs. "+amountForm);

  tble.querySelector('tbody').appendChild(newEl, tble.lastElementChild.previousSibling.lastElementChild);
}

function appendTD(tr, text){
  const td = document.createElement('td')
  td.innerText = text
  tr.appendChild(td)
}

Answer 2

尝试直接推送到 tbody 而不是 table

function addTableRow(){
  const tbody = document.querySelector('#myTable tbody')
  
  const newRow = document.createElement('tr')
  newRow.innerHTML = `<td>Foo</td><td>Bar</td>`
  tbody.appendChild(newRow)
}

<table id="myTable">
  <thead>
    <tr>
      <th>Helo</th>
      <th>World</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Foo</td>
      <td>bar</td>
    </tr>
  </tbody>
</table>

<button onclick="addTableRow()">Add row</button>

如何通过 Javascript 函数在 table 中插入行

How to insert row in table through Javascript function

javascript

nodes