JS操作页面表格内容的添加与删除
来源：互联网 发布：adobe调色软件 编辑：程序博客网 时间：2024/05/20 21:47
<html><head><title>HTML DOM</title><script type="text/javascript">//定义一个删除一行信息函数function doDel(bt){document.getElementById("tid").deleteRow(bt.parentNode.parentNode.rowIndex);}function doAdd(myform){//获取要添加的信息var id=myform.id.value;var name=myform.name.value;var age=myform.age.value;var sex=myform.sex.value;//获取表格节点对象var tid = document.getElementById("tid");//添加一行,返回新的行节点对象var row = tid.insertRow(tid.rows.length);//在行对象中添加一个个td节点row.insertCell(0).innerHTML=id;row.insertCell(1).innerHTML=name;row.insertCell(2).innerHTML=age;row.insertCell(3).innerHTML=sex;row.insertCell(4).innerHTML="<button onclick=\"doDel(this)\">删除</button>";return false;}</script></head><body><!-- html注释 --><h2 style="color:red">使用HTML的DOM操作来操作HTML标签</h2><table id="tid" width="400" border="1"><thead><tr><th>Id号</th><th>姓名</th><th>年龄</th><th>性别</th><th>操作</th></tr></thead><tbody id="mytable"><tr><td>1001</td><td>张三</td><td>20</td><td>男</td><td><button onclick="doDel(this)">删除</button></td></tr><tr><td>1002</td><td>李四</td><td>20</td><td>男</td><td><button onclick="doDel(this)">删除</button></td></tr><tr><td>1003</td><td>王五</td><td>20</td><td>男</td><td><button onclick="doDel(this)">删除</button></td></tr><tr><td>1004</td><td>赵六</td><td>20</td><td>男</td><td><button onclick="doDel(this)">删除</button></td></tr><tr><td>1005</td><td>田七</td><td>20</td><td>男</td><td><button onclick="doDel(this)">删除</button></td></tr></tbody></table><br/><br/><form action="a.php" onsubmit="return doAdd(this);">学号:<input type="text" name="id" /> <br/><br/>姓名:<input type="text" name="name" /> <br/><br/>年龄:<input type="text" name="age" /> <br/><br/>性别:<input type="text" name="sex" /> <br/><br/><input type="submit" value="添加"/></form><a href="2.html">2.html</a><a href="javascript:window.history.forward()">前进</a><a href="javascript:window.history.go(1)">前进</a></body></html>
