静态html页面：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> #tid{border-collapse:collapse;}/*这个样式是 为表格设置单线条 #tid 是id选择器 下面表格中直接id="tid"就能够使用这个样式 (.a 类选择器 class="a")*/ </style> </head> <body> <center> <table name="tname" id="tid" border="1" cellpadding="10" cellspacing="2" > <tbody id="tbody"> <tr bgcolor="#7fff00"> <th>名字</th> <th>性别</th> <th> </th> </tr> <tr> <td> tom </td> <td>男</td> <td><a href="#">删除</a></td> </tr> <tr> <td>jay</td> <td>男</td> <td><a href="#">删除</a></td> </tr> <tr> <td>小明</td> <td>男</td> <td><a href="#">删除</a></td> </tr> </tbody> </table> <h2>--------------------添加操作---------------------</h2> name:<input name="name" id="textname" size="10"> male:<input name="male" id="textmale"> <input name="submit" type="submit" value="添加"> </center> </body> </html>
静态页面效果：
通过使用JavaScript代码 使该页面完成以下效果：
点击删除时 弹窗确认(删除jay)
单击确定 实现jay节点的删除
输入内容 进行添加(添加节点)
单击添加 内容添加至上边的表格中(添加一个节点)
同时保证这个刚添加的节点 也能过正常实现删除
JavaScript代码：
<script type="text/javascript"> window.onload=function(){ //获取所有的a节点 var anodes=document.getElementById("tid").getElementsByTagName("a"); for(var i=0;i<anodes.length;i++){//为每个a节点定义onclick处理事件 anodes[i].onclick=function(){ shanchudaoimpl(this);//执行删除的函数 参数传的是this 表示当前操作的超链接 } } //调用添加函数 add(); } //定义去字符函数 function trim(text){ var reg=/^s*|s*$/g; return text.replace(reg,""); } //删除函数实现 function shanchudaoimpl(sc){ //获取单击列 的父类的父类 tr var trnode=sc.parentNode.parentNode; //获取单击列的 前面的文本 var textcontext=trnode.getElementsByTagName("td")[0].firstChild.nodeValue; textcontext=trim(textcontext);//去除前后的空格 //现在已经得到了文本值 var flag=confirm("删除" +textcontext +"的信息"); if(flag){ //执行删除 通过trnode得到父节点 然后删除 trnode.parentNode.removeChild(trnode); } } //定义添加的函数 function add(){ //首先取得提交按钮节点 绑定onclick时间 var submit=document.getElementsByName("submit")[0]; submit.onclick=function(){ //alert("提交") //首先获取对应的文本值 // var name=document.getElementsByName("name")[0];//第二种 通过属性值 获取 这种方式 不经常使用 返回了是一个集合数组 // var male=document.getElementsByName("male")[0]; // alert(name.value); // alert(male.value); // var name=document.getElementsByTagName("input")[0];//第三种 通过标签名进行获取 放回的同样是一个数组 // var male=document.getElementsByTagName("input")[0]; // alert(name.value); // alert(name.value); var name=document.getElementById("textname");//第一种方式 通过id值获取 var male=document.getElementById("textmale"); //创建两个文本节点 var textnodename=document.createTextNode(name.value); var textnodemale=document.createTextNode(male.value); //alert(name.value); //alert(male.value); //创建三个新的td节 var tdnode1=document.createElement("td"); var tdnode2=document.createElement("td"); var tdnode3=document.createElement("td"); //创建一个a节点 var a=document.createElement("a"); //设置a节点的值 a.href="#"; //a 节点中也要设置一个文本节点 将来在页面上显示的超链接就是这个 文本节点 var atext=document.createTextNode("删除"); //把该文本节点设置进a标签总 a.appendChild(atext); //因为刚加入的内容也是可以进行删除的 所以 这里需要为每一个刚创建的a节点 添加一个onclick事件 a.onclick=function(){ shanchudaoimpl(this); } //在td中设置文本 tdnode1.appendChild(textnodename); tdnode2.appendChild(textnodemale); tdnode3.appendChild(a); //创建tr标签 var tr=document.createElement("tr"); //在tr中设置td tr.appendChild(tdnode1); tr.appendChild(tdnode2); tr.appendChild(tdnode3); //得到父类节点tbody var tbody=document.getElementById("tbody"); tbody.appendChild(tr); } } </script>