Question

我正在尝试在js中创建一个表，其中包含第一列中的文本和一个带有for循环的重复HTML表（id'trestable'）。我不知道如何将重复的HTML表与HTML文档的其余部分隔离开来。当在第二个createTextNode（）中使用+ =运算符时，我得到所需的'questable'输出，但是随着循环的继续，所有构建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>

Answer 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>

将HTML表嵌套在javascript for循环中

1 个答案: