将动态行插入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

Steps to Take for Valid HTML and Accurate DOM Manipulation

1. 删除.render它是非常无效的，因为唯一的子元素<table>/<tbody>可以有<tr>。
2. 您可能采用这种方式进行潜水，因为当使用.innerHTML时，直接逻辑方式最终会消除表格的一部分。 .innerHTML会覆盖任何目标，除非你使用+=而不是=，这使.innerHTML反而覆盖内容。 document.querySelector('table').innerHTML + = HTMLString
3. 但是有一种方法可以将字符串呈现为像.innerHTML这样的HTML，但是插入字符串会覆盖内容。它不仅更安全，而且更准确。 .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>

Answer 2

你正在为一个表添加一个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);