嵌套的HTML表格在javascript for循環

Question

我想在第一列創建一個表格，並在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> 

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>