效果图如下：
css代码如下：
代码语言：javascript复制<style>
.addAll{
display: none;
}
</style>html代码如下：
代码语言：javascript复制 <table class="tableOne" border="1" width="100%">
<tr>
<th><input type="checkbox" /></th>
<th>姓名</th>
<th>性别</th>
<th>删除</th>
</tr>
<tr align="center">
<td><input type="checkbox" /> </td>
<td>金豪</td>
<td>男</td>
<td><input class="del" type="button" value="删除" />
<input class="xiugai" type="button" value="修改" />
</td>
</tr>
<tr align="center">
<td><input type="checkbox" /> </td>
<td>陈宇</td>
<td>男</td>
<td><input class="del" type="button" value="删除" />
<input class="xiugai" type="button" value="修改" />
</td>
</tr>
<tr align="center">
<td><input type="checkbox" /> </td>
<td>麦腾阳</td>
<td>男</td>
<td><input class="del" type="button" value="删除" />
<input class="xiugai" type="button" value="修改" />
</td>
</tr>
<tr align="center">
<td><input type="checkbox" /> </td>
<td>王思聪</td>
<td>男</td>
<td><input class="del" type="button" value="删除" /> <input class="xiugai" type="button" value="修改" /></td>
</tr>
</table>
<button class="qx">全选</button>
<button class="fx">反选</button>
<button class="qbx">全不选</button>
<button class="plsc">批量删除</button>
<button class="add">添加</button>
<table class="addAll" width="300" height="200" bgcolor="#e5e5e5">
<tr align="center">
<td>姓名</td>
<td><input class="names" type="text" placeholder="请输入姓名" /></td>
</tr>
<tr align="center">
<td>性别</td>
<td>
<select class="sexs">
<option>---请输入---</option>
<option value="男">男♂</option>
<option value="女">女♀</option>
</select>
</td>
</tr>
<tr align="center">
<td colspan="2">
<button class="trueAdd">确认添加</button>
<button class="truexiugai">确认修改</button>
</td>
</tr>
</table>js代码如下：
代码语言：javascript复制 //全选
$(".qx").on("click",function(){
//找到复选框
$(":checkbox").prop("checked",true)
})
//第二种方法 点击复选框
// $(":checkbox:first").on("click",function(){
//
// $(":checkbox").prop("checked",$(this).prop("checked"))
//
// })
//反选
$(".fx").on("click",function(){
$(":checkbox").each(function(){
this.checked=!this.checked
})
})
//全不选
$(".qbx").on("click",function(){
//找到复选框
$(":checkbox").prop("checked",false)
})
//删除
$(".del").on("click",function(){
$(this).parent().parent().remove()
})
//批量删除
$(".plsc").on("click",function(){
if ($(":checkbox:checked").length==0) {
alert("请至少选中一条")
} else{
$(":checkbox:checked").each(function(){
$(this).parent().parent().remove()
})
}
})
// 点击添加时出现弹层
$(".add").on("click",function(){
$(".addAll").show()
$(".trueAdd").show()
$(".truexiugai").hide()
})
//点击确认添加按钮的逻辑实现
$(".trueAdd").on("click",function(){
// 获取信息
var name=$(".names").val()
var sex=$(".sexs").val()
// $(".trueAdd").text("确认添加")
//姓名不得为空 如果性别为 ”请选择“ 改为男
if (name=="") {
alert("请输入姓名")
} else if(sex=="---请输入---"){
alert("请选择性别")
}else{
// 拼接 ，
$(".tableOne").append(`<tr align="center">
<td><input type="checkbox" /> </td>
<td>${name}</td>
<td>${sex}</td>
<td><input class="del" type="button" value="删除" />
<input class="xiugai" type="button" value="修改" />
</td>
</tr>`)
$(".names").val("")
$(".sexs").val("---请输入---")
$(".addAll").hide()
}
//删除
$(".del").on("click",function(){
$(this).parent().parent().remove()
})
// console.log(sex)
})
//修改
$(".xiugai").on("click",function(){
$(".addAll").show()
//获取确认添加按钮文本改成确认修改
// $(".trueAdd").text("确认修改")
//获取当前的文本
var name =$(this).parent().siblings("td:nth-child(2)").text()
// console.log(name)
var sex = $(this).parent().siblings("td:nth-child(3)").text()
$(".names").val(name)
$(".sexs").val(sex)
$(".trueAdd").hide()
$(".truexiugai").show()
var that=$(this)
//点击确认修改时
$(".truexiugai").on("click",function(){
// 获取信息
var name=$(".names").val()
var sex=$(".sexs").val()
that.parent().siblings("td:nth-child(2)").text(name)
that.parent().siblings("td:nth-child(3)").text(sex)
$(".addAll").hide()
})
})ok 效果完成
