<!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>
