一个 JS 写的 Table 自增/减行例子，和一个模态对话框传值例子的源代码

自己写了一个 Table 自增/减行例子，附带一个模态框传值示例。把源码共享一下，方便自己以后参考，也希望可以方便更多的朋友。

主页面 test.html 源代码：

主页面效果图：

新增行页面效果图

点击“新增”按钮，会按序号新增一行。点击每行的“删除”图标，会将该行（包含输入的编辑信息）删除，并更新所有行的序列号。点击放大镜图标，将会弹出模态对话框，在模态对话框中编辑完信息后，传值到主页面，并更新主页面放大镜前的编辑框内容。

模态页面 modal.html 源代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>模态</title> </head> <body > <input type="text" id="re" /><button type="button" id="ok" οnclick="a();">OK</button> <mce:script type="text/javascript"></mce:script> </body> </html>

模态页面执行效果图：

新增行页面，模态对话框效果图

JS 源文件 test.js 源码：

//在表尾添加一行 function addTr(){ var tableObj = document.getElementById("mainTable"); var xhtd = document.createElement("td"); with(xhtd){align="center";} xhtd.innerHTML = tableObj.childNodes[0].childNodes.length; var xmtd = document.createElement("td"); with(xmtd){align="center";} xmtd.innerHTML = "<input style="border:0" mce_style="border:0" type='text'><img src="search.jpg" mce_src="search.jpg" οnclick='editXm(" + tableObj.childNodes[0].childNodes.length + ")'>"; var rygxtd = document.createElement("td"); with(rygxtd){align="center";} rygxtd.innerHTML = "<select><option value='1'>父亲</option><option value='2'>母亲</option></select>"; var sctd = document.createElement("td"); with(sctd){align="center";} sctd.innerHTML = "<img src="delete.jpg" mce_src="delete.jpg" οnclick='delTr(" + tableObj.childNodes[0].childNodes.length + ")'>"; var tr = document.createElement("tr"); tr.appendChild(xhtd); tr.appendChild(xmtd); tr.appendChild(rygxtd); tr.appendChild(sctd); var tableObj = document.getElementById("mainTable"); tableObj.childNodes[0].appendChild(tr); } //删除指定行 function delTr(num){ if(window.confirm("真的删除吗？")){ var tableObj = document.getElementById("mainTable"); tableObj.childNodes[0].removeChild(tableObj.childNodes[0].childNodes[num]); resetSeq(); } } //行序列号重置 function resetSeq(){ var tableObj = document.getElementById("mainTable"); for(var i = 1;i < tableObj.rows.length;i ++){ tableObj.rows[i].cells[0].innerHTML = i; } } //模态传值 function editXm(num) { var tableObj = document.getElementById("mainTable"); var obj = new Object(); obj.name = "title"; var rev = window.showModalDialog("modal.html",obj,'dialogWidth=600px;dialogHeight=600px,dialogLeft=200px,dialogTop=200px,center=yes,help=1,resizable=0,status=1,scroll=1,edge=sunken,unadorned=yes,dialogHide=0'); if(rev){ tableObj.rows[num].cells[1].innerHTML = "<input value='" + rev + "' style="border:0" mce_style="border:0" type='text'><img src="search.jpg" mce_src="search.jpg" οnclick='editXm(" + num + ")'>"; } }

如果对代码有任何好的建议，请在线与作者交流，作者 MSN：defonds@hotmail.com。

posted @ 2010-04-21 16:12 Defonds 阅读(17) 评论(0) 编辑收藏举报

刷新页面返回顶部

一个 JS 写的 Table 自增/减行例子，和一个模态对话框传值例子的源代码

公告