效果图如下:
html代码如下:
<body>
<div class="btn">
<button class="seleAll">全选</button>
<button class="allDel">批量删除</button>
<button class="reverse">反选</button>
<button class="noneSele">全不选</button>
<button class="add">添加</button>
</div>
<table width="500" border="1" >
<tr height="30" align="center">
<td> 选择 </td>
<td>姓名</td>
<td>爱好</td>
<td>性别</td>
<td>删除</td>
</tr>
<tr height="30" align="center">
<td><input type="checkbox" /></td>
<td>范冰冰</td>
<td>演戏</td>
<td>女</td>
<td><input class="toDel" type="button" value="del" /> </td>
</tr>
</table>
<div class="obox">
<p><input class="name" type="text" value="姓名" /></p>
<p>
<select class="hobby">
<option>音乐</option>
<option>篮球</option>
<option>体育</option>
</select>
</p>
<p>
<select class="sex">
<option>男</option>
<option>女</option>
</select>
</p>
<p class="push">
<button>确认提交</button>
</p>
</div>
css代码如下:
.obox{
width: 400px;
height: 400px;
margin: 0 auto;
background: #e5e5e5;
display:none;
}
.obox input{
width: 150px;
height: 30px;
}
.obox select{
width: 150px;
height: 30px;
}
.obox p{
width: 150px;
height: 30px;
margin: 0 auto;
margin-top: 30px;
}
.push button:active{
background: #00f;
}
jq代码如下:
// 点击添加显示弹窗
$(".add").on('click',function(){
$(".obox").show()
$(this).css({
"background":"#0f0"
})
})
// 点击确认提交提交数据 弹窗消失
$(".push button").on("click",function(){
// 获取文本框数据
var theName= $(".name").val()
var theHobby=$(".hobby").val()
var theSex=$(".sex").val()
// <tr align="center">
// <td><input type="checkbox" /></td>
// <td>范冰冰</td>
// <td>演戏</td>
// <td>女</td>
// <td><input type="button" value="del" /> </td>
//
// </tr>
// 将数据放到表格中
$("table").append(`<tr height='30' align='center'>
<td><input type='checkbox' /> </td>
<td >${theName} </td>
<td>${theHobby} </td>
<td>${theSex} </td>
<td> <input class='toDel' type='button' value='del' /></td>
</tr>`)
//弹窗消失
$(".obox").hide()
$(".add").css({
"background":"#ccc"
})
//点击del 删除本条数据
$(".toDel").on("click",function(){
$(this).parent().parent().remove()
})
})
//点击全选 全部选中
$(".seleAll").on('click',function(){
var seleAll=$("input[type='checkbox']")
seleAll.each(function(){
seleAll.prop('checked',true)
})
})
// 反选
$(".reverse").on("click",function(){
var seleAll=$("input[type='checkbox']")
seleAll.each(function(){
this.checked=!this.checked
})
})
//全不选
$(".noneSele").on("click",function(){
var seleAll=$("input[type='checkbox']")
seleAll.each(function(){
seleAll.prop('checked',false)
})
})
//批量删除
$(".allDel").on("click",function(){
var allDel=$(":checkbox:checked")
if (allDel.length>0) {
allDel.each(function(){
$(this).parent().parent().remove()
})
} else{
alert('请选中数据后在删除')
}
})
//点击del 删除本条数据
$(".toDel").on("click",function(){
$(this).parent().parent().remove()
})
好了!如果有更好的修改意见或建议欢迎留言