案例4_动态表格_删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin: auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } </style> </head> <body> <div> <input type="text" id="id" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="gender" placeholder="请输入性别"> <input type="button" value="添加" id="btn_add"> </div> <table> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td>1</td> <td>令狐冲</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>2</td> <td>任我行</td> <td>男</td> <td><a href="javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td>3</td> <td>岳不群</td> <td>?</td> <td><a href="javascript:void(0);" onclick="delTr(this);" >删除</a></td> </tr> </table> <script> /* 分析： 1.添加： 1. 给添加按钮绑定单击事件 2. 获取文本框的内容 3. 创建td，设置td的文本为文本框的内容。 4. 创建tr 5. 将td添加到tr中 6. 获取table，将tr添加到table中 2.删除： 1.确定点击的是哪一个超链接 <a href="javascript:void(0);" onclick="delTr(this);" >删除</a> 2.怎么删除？ removeChild():通过父节点删除子节点 */ //1.获取按钮 /* document.getElementById("btn_add").onclick = function(){ //2.获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //3.创建td，赋值td的标签体 //id 的 td var td_id = document.createElement("td"); var text_id = document.createTextNode(id); td_id.appendChild(text_id); //name 的 td var td_name = document.createElement("td"); var text_name = document.createTextNode(name); td_name.appendChild(text_name); //gender 的 td var td_gender = document.createElement("td"); var text_gender = document.createTextNode(gender); td_gender.appendChild(text_gender); //a标签的td var td_a = document.createElement("td"); var ele_a = document.createElement("a"); ele_a.setAttribute("href","javascript:void(0);"); ele_a.setAttribute("onclick","delTr(this);"); var text_a = document.createTextNode("删除"); ele_a.appendChild(text_a); td_a.appendChild(ele_a); //4.创建tr var tr = document.createElement("tr"); //5.添加td到tr中 tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); //6.获取table var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); }*/ //使用innerHTML添加 document.getElementById("btn_add").onclick = function() { //2.获取文本框的内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; //获取table var table = document.getElementsByTagName("table")[0]; //追加一行 table.innerHTML += "<tr>\n" + " <td>"+id+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+gender+"</td>\n" + " <td><a href=\"javascript:void(0);\" onclick=\"delTr(this);\" >删除</a></td>\n" + " </tr>"; } //删除方法 function delTr(obj){ var table = obj.parentNode.parentNode.parentNode; var tr = obj.parentNode.parentNode; table.removeChild(tr); } </script> </body> </html>
HTMLDOM_innerHTML
HTML DOM
1. 标签体的设置和获取：innerHTML
2. 使用html元素对象的属性
3. 控制元素样式
使用元素的style属性来设置
如：
//修改样式方式1
div1.style.border = “1px solid red”;
div1.style.width = “200px”;
//font-size–> fontSize
div1.style.fontSize = “20px”;
提前定义好类选择器的样式，通过元素的className属性来设置其class属性值。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTMLDOM</title> </head> <body> <!--id为div1的标签--> <div id = "div1"> div </div> <script > <!-- 获取div1--> var div = document.getElementById("div1"); //innerHTML 属性设置或返回表格行的开始和结束标签之间的 HTML。 var innerHTML = div.innerHTML; //页面展示 //alert(innerHTML); //div标签中替换一个文本输入框 // div.innerHTML = "<input type = 'text'>"; //div标签中追加一个文本输入框 div.innerHTML += "<input type = 'text'>"; </script> </body> </html>
原文地址：http://www.cnblogs.com/x3449/p/16919300.html
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，请务用于商业用途!
3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！
8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载
声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
