將動態行插入HTML表

Question

我正在嘗試在HTML表中插入動態行。 如果我注釋應該在html標記（.innerHTML）中插入動態行的行，則表的格式很好，標題行位於頂部，第一行位於其下方。

一旦取消注釋動態行渲染，就會在標題行的頂部創建動態行。 我找不到原因。 看看下面的jsfiddle測試代碼。

 html_out = "<tr><td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td></tr>"; document.getElementById("render").innerHTML = html_out; 

 #scrolltable { margin-top: 20px; height: 150px; overflow: auto; } #scrolltable table { border-collapse: collapse; } #scrolltable th div { position: absolute; margin-top: -20px; } 

 <div id="scrolltable"> <table> <col width ="50px"> <col width ="60px"> <col width ="120px"> <col width ="100px"> <col width ="120px"> <tr> <th><div></div></th> <th><div>Rank</div></th> <th><div>Squad Name</div></th> <th><div>Skill Pts</div></th> <th><div>Current War (vs)</div></th> </tr> <tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr> <div id="render"></div> </table> </div> 

正確的表格格式：

行重疊標題：

https://jsfiddle.net/ShaiHul/0rzqvcbm/60/

Answer 1

您正在將div添加到表中，這會弄亂布局。 您應該只將HTML插入tr而不是div中，這樣就可以正常工作：

 html_out = "<td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td>"; document.getElementById("render").innerHTML = html_out; 

 #scrolltable { margin-top: 20px; height: 150px; overflow: auto; } #scrolltable table { border-collapse: collapse; } #scrolltable th div { position: absolute; margin-top: -20px; } 

 <div id="scrolltable"> <table> <col width ="50px"> <col width ="60px"> <col width ="120px"> <col width ="100px"> <col width ="120px"> <tr> <th><div></div></th> <th><div>Rank</div></th> <th><div>Squad Name</div></th> <th><div>Skill Pts</div></th> <th><div>Current War (vs)</div></th> </tr> <tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr> <tr id="render"></tr> </table> </div> 

如果您不想依賴html中有一個空元素，則可以獲取表並使用appendChild()向其中添加另一個表行，例如：

var html_out = "<td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td>";
var tr = document.createElement("tr");
tr.innerHTML = html_out;
document.getElementById("table").appendChild(tr);

Answer 2

有效HTML和准確DOM操作應采取的步驟

1. 刪除.render會導致它非常.render這僅僅是因為<table>/<tbody>唯一的子元素是<tr> 。

2. 您可能求助於這種潛水方式，因為當使用.innerHTML ，直接的邏輯方式最終使表的一部分消失了。 除非您使用+=而不是= ， 否則 .innerHTML覆蓋目標對象，這會使.innerHTML追加而覆蓋內容。

   document.querySelector('table').innerHTML + = HTMLString

3. 但是有一種方法可以將Strings渲染為.innerHTML HTML，但是插入Strings .innerHTML覆蓋內容。 它不僅更安全，而且准確性更高。

   .insertAdjacentHTML( position ， HTMLString )

   第一個參數position是四個可能的String之一，下面是我們打算將HTMLString （第二個參數）放置到其中或周圍的目標元素：
   

   位置： “ beforebegin” <table> “ afterbegin” ......“ beforeend” </table> “ afterend”

---

演示

 HTMLStr = "<tr><td>GRP2</td><td>1</td><td>Team 3</td><td>32000</td><td>Team 4</td></tr>"; document.querySelector("table").insertAdjacentHTML('beforeend', HTMLStr); 

 #scrolltable { margin-top: 20px; height: 150px; overflow: auto; } #scrolltable table { border-collapse: collapse; } #scrolltable th div { position: absolute; margin-top: -20px; } 

 <div id="scrolltable"><table><col width="50px"><col width="60px"><col width="120px"><col width="100px"><col width="120px"><tr><th><div></div></th><th><div>Rank</div></th><th><div>Squad Name</div></th><th><div>Skill Pts</div></th><th><div>Current War (vs)</div></th></tr><tr><td>GRP1</td><td>2</td><td>Team A</td><td>30777</td><td>Team B</td></tr></table></div>