这段代码非常的简单，仅仅作为自己的一个小小的记录！
ok，先上一个简单的图例，效果如下（注意：这只是一个简单的例子，不过可以根据这个简单的例子，变化出更为复杂的效果）！
代码也非常的简单，如下所示（注意：图片的路径是在我的小例子中的，表的样式也有待自己的调整）：
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>例子</title> <script language="javascript"> var i = 0, j = 1; //行号与列号 var oNewRow; //定义插入行对象 var oNewCell1, oNewCell2,oNewCell3; //定义插入列对象 //添加下一行 function addNextRow() { i = document.getElementById("MyTable").rows.length; oNewRow = document.getElementById("MyTable").insertRow(i); oNewRow.id = j; //添加第一列 oNewCell1 = document.getElementById("MyTable").rows[i].insertCell(0); oNewCell1.innerHTML = "<input name=‘id_‘ type=‘text‘ style=‘width: 99%‘ id=‘investorName" + j + "‘/>"; //添加第二列 oNewCell2 = document.getElementById("MyTable").rows[i].insertCell(1); oNewCell2.innerHTML = "<input name=‘name_‘ type=‘text‘ style=‘width: 99%‘ id=‘investorProportion" + j + "‘/>"; //添加第三列 oNewCell3 = document.getElementById("MyTable").rows[i].insertCell(2); oNewCell3.innerHTML = "<img src=‘images/button/ico/sc.png‘ name=del"+ j + " onClick=‘delCurrentRow(" + j + ");‘ width=‘16‘ height=‘16‘ />"; j++; } //删除当前行 function delCurrentRow(j) { with (document.getElementById("MyTable")) { for ( var i = 0; i < rows.length; i++) { if (rows[i].id == j) { deleteRow(i); } } } } </script> </head> <body> <table id="MyTable" width="100%" border="0" cellpadding="0" cellspacing="0"> <tr> <td width="47%">ID号</td> <td width="47%">姓名</td> <td><img src="images/button/ico/plus.png" name="addRow_" onclick="addNextRow();" width="16" height="16" /></td> </tr> <tr> <td><input name="id_" type="text" style="width: 99%" id="id"/></td> <td><input name="name_" type="text" style="width: 99%" id="name"/></td> <td> </td> </tr> </table> </body> </html>
原文：http://www.cnblogs.com/godtrue/p/3640831.html