jqury中的全选/反选批量删除

最新推荐文章于 2022-02-15 14:20:56 发布

wanglinuo521

最新推荐文章于 2022-02-15 14:20:56 发布

阅读量206

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/wanglinuo521/article/details/78995252

版权

前端专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
}
.box{
width: 800px;
height: 500px;
margin: 20px auto;
padding: 10px;
}
.box table:nth-child(1){
width: 780px;
margin-bottom: 5px;
}
.box table:nth-child(1) tr td{
height: 30px;
}
.box table:nth-child(1) tr td input{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td select{
width: 84px;
height: 25px;
}
.box table:nth-child(1) tr td.btn{
background: #FF0000;
border-radius: 5px;
border: 1px solid #666666;
}
.box>input{
width: 70px;
height: 28px;
float: right;
border-radius: 5px;
border: 1px solid #666666;
margin-left: 30px;
margin-bottom: 5px;
}
.box>input:nth-child(3){
background: green;
}
.box>input:nth-child(2){
background: yellow;
}
.box.bg{
width: 780px;
margin-bottom: 5px;
}
.box.bg tr:nth-child(1){
background: gold;
}
.box.bg tr:nth-child(2n){
background: greenyellow;
}
</style>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(function(){
var city=$("#city").val();
var regions=[["海定","朝阳"],["安阳","濮阳","信阳"]]
for(var i=0;i<regions[city].length;i++){
var op=$("<option></option>");
console.log("---",regions[city][i]);
op.text(regions[city][i]);
$("#region").append(op);
}
$("#city").change(function(){
city=$(this).val();
$("#region").empty();
for (var i=0;i<regions[city].length;i++) {
var op=$("<option></option>");
op.text(regions[city][i]);
$("#region").append(op);
}
});
});
function add(){
var b1=false;
var b2=false;
var name=$("#name").val();
var birthday=$("#birthday").val();
var sex=$("#sex").val();
var sel=$("#region").val();
var cs=$("#city option:selected").html();
if(name==""){
b1=false;

}else if(name.length<3||name.length>30){
b1=false;
}else{
b1=true;
}
if(birthday==""){
b2=false;
}else{
b2=true;
}
if(b1==false||b2==false){
alert("输入信息有误");
}else{
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name +"</td>" +
"<td>" + sex +"</td>" +
"<td>" + birthday +"</td>" +
"<td>" + cs + "-" + sel +"</td>" +
"<td><input type='button' οnclick='return del(this)' value='删除'></td>" +
"</tr>");
}
}
//弹窗提示
function del(p){
var f=confirm("确认删除！！！");
if(!f){
return;
}
p.parentNode.parentNode.remove();
}
function cheAll(){
var cek=$("#che")[0].checked;
var ck=$("input[name='ck']");
for (var i=0;i<ck.length;i++) {
ck[i].checked=cek;
}
}
function che(){
var cks=document.getElementsByName("ck");
for (var i=0;i<cks.length;i++) {
cks[i].checked=!cks[i].checked;
}
}
function delall(){
var ck=$("input:checked[name='ck']");
if(ck.length==0){
alert("请选择，然后进行删除");
return;
}
var f=confirm("确认删除！！");
if(!f){
return;
}
for (var i=0;i<ck.length;i++) {
ck[i].parentNode.parentNode.remove();
}
}
</script>
</head>
<body>
<div class="box">
<table>
<tr>
<td>姓名：<input type="text" id="name"></td>
<td>性别：<select id="sex"><option>男</option><option>女</option></select></td>
<td>生日:<input type="date" id="birthday"/></td>
<td>住址：
<select id="city">
<option value="0">北京</option>
<option value="1">河南</option>
</select>
<select id="region">
<option value="0">西二旗</option>
<option value="1">郑州</option>
</select>
</td>
<td><input type="button" οnclick="add()" value="添加" class="btn"/></td>
</tr>
</table>
<input type="button" οnclick="delall()" value="批量删除" />
<input type="button" οnclick="che()" value="全选/反选" />
<table border="1" cellpadding="0" cellspacing="0" class="bg">
<tr>
<td><input type="checkbox" οnclick="cheAll()" id="che"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>