将动态行插入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极其无效，因为 <table>/<tbody>唯一的子元素是<tr> 。< / p>

2. 您可能会采取这种潜水方式，因为使用.innerHTML时，直接逻辑方式最终会抹去表的一部分。 .innerHTML会覆盖它所针对的任何对象，除非您使用+=而不是=来代替{em> ，这会使.innerHTML附加而覆盖内容。

     

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

3. 但是有一种方法可以像.innerHTML一样将字符串呈现为HTML，但是插入字符串而不是覆盖内容。它不仅更安全，而且准确性更高。

     

   .insertAdjacentHTML( position, HTMLString )

   第一个参数 position 是四个可能的String之一，下面表示我们打算将 HTMLString < / em> （第二个参数）：
   

     

   位置：“ 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>