創建嵌套表

美好的一天。我試圖創建一百次嵌套表。然而，我的代碼創建了一個主表，然後裏面有100個獨立的表。（感謝Sachin爵士的幫助）我需要的是桌子內的桌子。請幫我修復代碼。

創建嵌套表

<html> 
<head> <title> Hello! </title> 

<script type="text/javascript"> 
function add() { 
    var ni = document.getElementById('myDiv'); 
    var numi = document.getElementById('theValue'); 
    var num = (document.getElementById('theValue').value -1)+ 2; 
    numi.value = num; 
    var newdiv = document.createElement('div'); 
    var divIdName = 'my'+num+'Div'; 
    newdiv.setAttribute('id',divIdName); 
    newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value=1 id='theValue' /><div id='" + divIdName + "'></td></tr></table>"; 
    ni.appendChild(newdiv); 
    for(var i=1;i<100;i++) { 
     var ni = document.getElementById(divIdName); 
     var numi = document.getElementById('theValue'); 
     var num = (document.getElementById('theValue').value -1)+ 2; 
     numi.value = num; 
     var newdiv = document.createElement('div'); 
     var divIdName = 'my'+num+'Div'; 
     newdiv.setAttribute('id',divIdName); 
     var j=i++; 
     newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value='" + j + "' id='theValue' /><div id='" + divIdName + "'></td></tr></table>"; 
     ni.appendChild(newdiv); 
    } 
} 
</script> 

</head> 
<body onload="add()"> 
<table border="1"> 
    <tr> 
     <td> Hello! <input type='hidden' value='0' id='theValue' /> 

     <div id='myDiv'> </div> </td> 
    </tr> 
</table> 
</body> 
</html>

來源

2013-03-01 Yngve Vahit

你能描述一下不工作，或者給我們你的代碼，這樣的的jsfiddle我們可以自己看看嗎？ – Benmj 2013-03-01 16:26:51

DOM操作很慢。你最好把它作爲一個字符串來構建，並且最後一次插入它。 – 2013-03-01 16:29:51

什麼是隱藏的輸入？你需要嵌套隱藏輸入嗎？爲什麼他們都有相同的ID？ – Pete 2013-03-01 16:29:53

這應該這樣做（我已刪除了隱藏的輸入，因爲不需要它）：http://jsfiddle.net/rPR9w/1/

function add() { 
    for (i=1; i<=100; i++) { 
     addAnother(i); 
    } 
} 


function addAnother(counter) { 
    var container = document.getElementById('myDiv' + counter); 
    container.innerHTML = makeTable(counter + 1); 
} 

function makeTable(counter) { 

    return "<table border=1><tr><td> Hello! <div id='myDiv" + counter + "'></td></tr></table>"; 

}

來源

2013-03-01 16:37:38 Pete

非常感謝，先生！ :) – 2013-03-01 16:44:36

它似乎不是太糟糕！ – 2017-09-04 05:26:36

回答

相關問題