在 javascript for 循环中嵌套 HTML 表格答案

【问题标题】：Nesting HTML tables inside javascript for loop在 javascript for 循环中嵌套 HTML 表格
【发布时间】：2017-03-14 16:13:32
【问题描述】：

我正在尝试在 js 中创建一个表，该表将包含第一列中的文本和一个带有 for 循环的重复 HTML 表（id 'questable'）。我不知道如何将重复的 HTML 表格与文档 HTML 的其余部分隔离开来。在第二个 createTextNode() 中使用 += 运算符时，我得到了所需的“可查询”输出，但随着循环的继续，我还得到了所有构建 HTML 内容。帮助！我对这一切都很陌生...谢谢。

<table id="questable" name="qtable" class="questiontable"><tr><td style="text-align:center; width: 5%;"><font face="Arial, Helvetica, sans-serif"></font><input name="Most"  type="radio"  onclick="TestCheckMarkQ(0, 0)"  value="3"></td><td style="width:95%;">HIGH</td></tr><tr><td style="text-align:center; width: 5%;"><input type="radio" name="Most" value="2"  onclick="TestCheckMarkQ(1, 0)"  /></td><td style="width:95%;">MEDIUM</td></tr><tr><td style="text-align:center; width: 5%;"><input type="radio" name="Most" value="4"  onclick="TestCheckMarkQ(2, 0)"></td><td style="width:95%;">LOW</td></tr></table>

<table id="filrank"></table>

<script>
function fun3() 
{

var e=document.getElementById('filters').rows.length;
//alert(e);

var i;

for (i=0; i<e; i++)
{
    var x = document.getElementById("filrank");
    document.body.appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "tr"+i);
    document.getElementById("filrank").appendChild(y);

    var z = document.createElement("TD");
    var d = document.getElementsByName('fil')[i].value
    var t = document.createTextNode(d);
    z.appendChild(t);
    document.getElementById("tr"+i).appendChild(z);

    var zz = document.createElement("TD");
    var dd=document.getElementById('questable').innerHTML;
    tt=document.createTextNode(document.getElementById('filrank').innerHTML+=dd)
    zz.appendChild(tt);
    document.getElementById("tr"+i).appendChild(zz);
}
}
</script>

【问题讨论】：

问题是你必须在table标签里面放一个for

标签： javascript html for-loop nested-table

【解决方案1】：

我在脚本的最后一组中使用 insertAdjacentHTML 找到了答案。这给了我想要的输出。 HTML 表现在在表的第二列中为循环的每次迭代重复。

<table id="questable" name="qtable" class="questiontable"><tr><td style="text-align:center; width: 5%; border: 1px solid black;"><font face="Arial, Helvetica, sans-serif"></font><input name="Most"  type="radio"  onclick="TestCheckMarkQ(0, 0)"  value="3"></td><td style="width:5%;">HIGH</td><td style="text-align:center; width: 5%;"><input type="radio" name="Most" value="2"  onclick="TestCheckMarkQ(1, 0)"  /></td><td style="width:5%;">MEDIUM</td><td style="text-align:center; width: 5%;"><input type="radio" name="Most" value="4"  onclick="TestCheckMarkQ(2, 0)"></td><td style="width:5%;">LOW</td></tr></table>


<table id="filrank"></table>

<section>

<script>
function fun3() 
{

var e=document.getElementById('filters').rows.length;
//alert(e);

var i;

for (i=0; i<e; i++)
{
    var x = document.getElementById("filrank");
    document.body.appendChild(x);

    var y = document.createElement("TR");
    y.setAttribute("id", "tr"+i);
    document.getElementById("filrank").appendChild(y);

    var z = document.createElement("TD");
    var d = document.getElementsByName('fil')[i].value
    var t = document.createTextNode(d);
    z.appendChild(t);
    y.appendChild(z);

    var z = document.createElement("TD");
    var d=document.getElementById('questable').innerHTML;
    z.insertAdjacentHTML('beforeend',d);
    y.appendChild(z);
}
}
</script>

【讨论】：