當(dāng)前位置：
首頁(yè) >
前端技术
> javascript
>内容正文
javascript
简单JS实现对表的行的增删
生活随笔
收集整理的這篇文章主要介紹了
简单JS实现对表的行的增删
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
這段代碼非常的簡(jiǎn)單，僅僅作為自己的一個(gè)小小的記錄！
ok，先上一個(gè)簡(jiǎn)單的圖例，效果如下（注意：這只是一個(gè)簡(jiǎn)單的例子，不過可以根據(jù)這個(gè)簡(jiǎn)單的例子，變化出更為復(fù)雜的效果）！
代碼也非常的簡(jiǎn)單，如下所示（注意：圖片的路徑是在我的小例子中的，表的樣式也有待自己的調(diào)整）：
<!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; //行號(hào)與列號(hào)var oNewRow; //定義插入行對(duì)象var oNewCell1, oNewCell2,oNewCell3; //定義插入列對(duì)象//添加下一行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++;}//刪除當(dāng)前行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號(hào)</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>?
轉(zhuǎn)載于:https://www.cnblogs.com/godtrue/p/3640831.html
創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)總結(jié)
以上是生活随笔為你收集整理的简单JS实现对表的行的增删的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 手机伪原创视频处理工具 视频md5修改器
- 下一篇： XCAP 协议