javascript简单案例-动态表格
2021/8/11 11:06:18
本文主要是介绍javascript简单案例-动态表格,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>动态表格</title> <style> table{ border: 1px solid; margin:0 auto; width: 500px; } td,th{ text-align: center; border: 1px solid; } div{ text-align: center; margin: 50px; } .out{ background-color: white; } .over{ background-color: pink; } </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><input type = "checkbox" name = "cb" id="fir" ></th> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <tr> <td><input type = "checkbox" name = "cb"></td> <td>1</td> <td>马克</td> <td>男</td> <td><a href = "javascript:void(0);" onclick="delTr(this);">删除</a></td> <!-- 这里的方法中的this表示删除该行 ,this在写方法时参数为obj--> </tr> <tr> <td><input type = "checkbox" name = "cb"></td> <td>2</td> <td>风清扬</td> <td>男</td> <td><a href = "javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> <tr> <td><input type = "checkbox" name = "cb"></td> <td>3</td> <td>童丽</td> <td>女</td> <td><a href = "javascript:void(0);" onclick="delTr(this);">删除</a></td> </tr> </table> <div> <input type="button" value="全选" id = "select_all"/> <input type="button" value="反选" id = "select_back" /> </div> <script> /* //添加方法一:正常 document.getElementById("btn_add").onclick = function(){ //获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; var td_id = document.createElement("td"); //获取的内容 需要使用textnode来放 var text_id = document.createTextNode(id); td_id.appendChild(text_id); 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); 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); var tr = document.createElement("tr"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_a); var table = document.getElementsByTagName("table")[0]; table.appendChild(tr); } */ //在页面加载后开始执行 window.onload = function(){ //全选 document.getElementById("select_all").onclick = function(){ var s = document.getElementsByName("cb"); for(var i = 0;i<s.length;i++){ s[i].checked = true; //复选框的属性checked表示是否选中 } } //反选 document.getElementById("select_back").onclick = function(){ var s = document.getElementsByName("cb"); for(var i = 0;i<s.length;i++){ if(s[i].checked){ s[i].checked = false; } else{ s[i].checked = true; } //复选框的属性checked表示是否选中 } } //首框全选 var s = document.getElementById("fir") s.onclick = function(){ // if(s.checked){ // var m = document.getElementsByName("cb"); // for(var i = 1;i<m.length;i++){ // m[i].checked = true; // } // } var m = document.getElementsByName("cb"); for(var i = 0;i<m.length;i++){ m[i].checked = s.checked; } } //选中该背景色 var trs = document.getElementsByTagName("tr"); for(var i = 0;i<trs.length;i++){ trs[i].onmouseover = function(){ this.className = "over"; } trs[i].onmouseout = function(){ this.className = "out"; } } //innerhtml方法添加 document.getElementById("btn_add").onclick = function(){ //获取文本框内容 var id = document.getElementById("id").value; var name = document.getElementById("name").value; var gender = document.getElementById("gender").value; var table = document.getElementsByTagName("table")[0]; table.innerHTML += "<tr>\n"+ "<td><input type = 'checkbox' name = 'cb'></td>"+ "<td>"+id+"</td>"+ "<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; // 用parentNode属性获取父节点 table.removeChild(tr); } } </script> </body> </html>
这篇关于javascript简单案例-动态表格的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28微服务架构中API版本控制的实践
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南