javascript 动态添加表格

Question

<table>
<TR>
    <TD>
产品ID：
    </TD>
    <TD>
<INPUT name=product_id1> 
    </TD>
</TR>
</table>如何编写一个javascript控件，动态生成上述表格，初始name为product_id1,第一次点击控件生成表格name为product_id2，第二次点击控件生成表格name为product_id3，依此类推！

Answer 1

<script> 
function show(){ 
    var obj=document.getElementById("tbl1").childNodes[0]; 
    var tr =document.createElement("tr");
    var td1 =document.createElement("td");
    var td2 =document.createElement("td");
    var input=document.createElement("input");
    input.name="product_id"+(obj.rows.length+1);
    
    td1.innerHTML=(obj.rows.length+1);
    td2.appendChild(input);
    tr.appendChild(td1);
    tr.appendChild(td2);
    obj.appendChild(tr);
} 
</script> 
<input type=button onclick="show();">
<table id=tbl1> 
<TR> 
    <TD> 
ID: 
    </TD> 
    <TD> 
<INPUT name=product_id1> 
    </TD> 
</TR> 
</table>

Answer 2

利用利用某个HTML标签的innerHTML，加入取到一个td单元格tdElementvar int i = 0;
tdElement.innerHTML = "<table border=\"1\" cellspacing=\"0\" name=\"product_id\"+i+">"</table>";

Answer 3

<div id="div1"></div>
<INPUT TYPE="button" VALUE="新增" ONCLICK="addRow()">
 <SCRIPT LANGUAGE="JavaScript">
 <!--
 var i = 0;
 init();
 function init(){
var tab = document.createElement("table");
tab.id = "tab1";
tab.border = "1";
div1.appendChild(tab);
addRow();
}
function addRow(){
var newRow = tab1.insertRow();
var Cell1 = newRow.insertCell();
Cell1.innerHTML = "产品ID：";
var Cell2 = newRow.insertCell();
Cell2.innerHTML = "<INPUT name=product_id"+ ++i +">";
alert(Cell2.innerHTML);
}
 //-->
 </SCRIPT>