如何通過Javascript函式在表格中插入行-有解無憂

我正在嘗試將另一行插入帶有頁腳的表格中。

這是我的代碼：

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);
       }

我的函式給了我以下結果：如何通過Javascript函式在表格中插入行

如您所見（IN INSPECT ELEMENTS WINDOW），新行插入到頁腳之后。如何正確添加

在表格的最后一行之后？

uj5u.com熱心網友回復：

不要將元素直接插入到<table>元素中，而是選擇<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 漏洞），使用innerTextortextContent代替。但這意味著您必須以<td>不同的方式創建 s ：

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

uj5u.com熱心網友回復：

嘗試tbody直接推到桌子的內部

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/461455.html

標籤：javascript 节点

上一篇：先處理第一個promise，其余按完成順序

下一篇：有條件地合并物件陣列