这段代码非常的简单,仅仅作为自己的一个小小的记录!
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>