<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="js/jquery-3.3.1.min.js"></script> </head> <body> <table border="1px" id="table"> <tr> <th>ID</th> <th>全选<input type="checkbox" id="quan" onclick="cheng(0)"></th> <th>姓名</th> <th>性别</th> <th>地址</th> <th>操作</th> </tr> <tr> <td class="userid">1</td> <td>选择<input type="checkbox" name="dan" onclick="cheng(1)"></td> <td>张三</td> <td>男</td> <td>广西</td> <td><a href="#" onclick="ZX(this)">修改</a></td> </tr> <tr> <td class="userid">2</td> <td>选择<input type="checkbox" name="dan" onclick="cheng(1)"></td> <td>张三</td> <td>男</td> <td>广西</td> <td><a href="#" onclick="ZX(this)">修改</a></td> </tr> <tr> <td class="userid">3</td> <td>选择<input type="checkbox" name="dan" onclick="cheng(1)"></td> <td>张三</td> <td>男</td> <td>广西</td> <td><a href="#" onclick="ZX(this)">修改</a></td> </tr> </table> <input type="text" id="wen"> <input type="button" value="查找" id="cha"> <div class="head"> <!-- <input type="text" id="name" placeholder="请输入姓名">--> <!-- <select>--> <!-- <option>男</option>--> <!-- <option>女</option>--> <!-- </select>--> <!-- <input type="text" id="diz" placeholder="请输入地址">--> <input type="button" value="添加" onclick="ZX()"> <input style="margin-left: 100px" type="button" id="shanchu" value="删除" onclick="cheng(2)"> </div> <script> function cheng(obj) { var quan = document.getElementById("quan"); var dan = document.getElementsByName("dan"); if (obj==0){ quans(quan,dan); }if (obj==1){ dans(quan,dan); }if (obj==2){ SC(quan,dan); } function quans(quan,dan) { for (var i = 0; i<dan.length;i++){ //checked 状态 dan[i].checked=quan.checked; } } function dans(quan,dan){ var danyes = 0; var danno = 0; for (var i=0; i<dan.length; i++){ if (dan[i].checked){ danyes++; }else { danno++; } } if (danyes==dan.length){ quan.checked=true }else if(danno == dan.length) { quan.checked=false; }else { quan.checked=false; } } function SC(quan,dan) { for(var i =dan.length-1 ;i >= 0 ;i--){ if(dan[i].checked){ // 10. 删除整行 dan[i].parentNode.parentNode.remove(); // //没有这个会剩一个问题 // i--; } } //全选删除之后,会把全选按钮设置为非选 quan.checked = false; } } function ZX(obj) { // var name = document.getElementById("name").value; // var sel = document.getElementsByTagName("select")[0]; // var gender = sel.options[sel.selectedIndex].text; // var diz = document.getElementById("diz").value; var name = prompt("请输入名字"); var gender = prompt("请输入性别"); var diz = prompt("请输入地址"); if (obj==null){ insert(name,gender,diz); }else { xg(obj,name,gender,diz); } function insert(name,gender,diz) { if (name==null || gender==null || diz==null || name == "" || gender == "" || diz == ""){ alert("新增失败字段有空") return; } var table = document.getElementById("table"); table.innerHTML+="<tr>"+"<td>选择<input type=\"checkbox\" name=\"dan\" onclick=\"dans()\"></td>"+"<td>3</td>"+"<td>"+name+"</td>"+"<td>"+gender+"</td>"+"<td>"+diz+"</td>"+"<td><a href=\"#\" onclick=\"ZX(this)\">修改</a></td>"+"</tr>"; alert("新增成功") } function xg(obj,name,gender,diz) { if (name==null || gender==null || diz==null ||name == "" || gender == "" || diz == ""){ alert("修改失败字段有空") return; } obj.parentNode.parentNode.innerHTML = "<tr>"+"<td>选择<input type=\"checkbox\" name=\"dan\" onclick=\"cheng(1)\"></td>"+"<td>3</td>"+"<td>"+name+"</td>"+"<td>"+gender+"</td>"+"<td>"+diz+"</td>"+"<td><a href=\"#\" onclick=\"ZX(this)\">修改</a></td>"+"</tr>"; alert("修改成功") } } // $("#cha").click(function () { // var wen = $("#wen").val(); // // }) $("#cha").click(function () { var key = $("#wen").val() var trr = $("table tr:gt(0)") if (key != "") { for (var i = 0; i < trr.length; i++) { var id = trr.eq(i).find("td:first").html() if (id == key) { trr.eq(i).show() } else { trr.eq(i).hide() } } } else { for (var i = 0; i < trr.length; i++) { trr.eq(i).show() } } }) </script> </body> </html>
标签:obj,name,gender,dan,查询,全选,diz,var,表单 From: https://www.cnblogs.com/xiaobaixuecheng101/p/16886193.html