隔行换色、注册功能、全选反选、两级联动、删除、批量删除等（周考2）

最新推荐文章于 2022-06-23 17:11:20 发布

四夕520

最新推荐文章于 2022-06-23 17:11:20 发布

阅读量321

点赞数

本文链接：https://blog.csdn.net/Luokaiqin520/article/details/79360568

版权

1. 完成如图布局，要求展示数据每行变色（如图所示）。

2. 完成用户注册功能。用户信息要求信息校验，姓名非空，只能由字母和数字构成，长度6-12个字符；性别单选按钮，爱好复选框实现；籍贯实现两级联动，住址城市默认为北京，市区默认为海淀区，当用户改变城市时市区随之联动。

3. 用户点击注册按钮时，如果信息不符合要求则弹框提示用户输入信息有误；如果输入信息准确则将数据添加展示到下面的列表中。

4. 列表展示效果的实现，包括全选按钮，反选按钮，批量删除按钮，删除按钮

5. 点击每一行的删除按钮时删除该行信息，删除前弹框提示用户是否确定删除，删除成功后提示用户删除成功。

6. 实现全选功能，点击全选按钮实现复选框的全选功能

7. 点击反选可以实现反选功能

8. 实现批量删除功能。如果用户点击批量删除时都没有选中需要删除的数据则提示用户需要先选中数据。删除前弹框提示用户是否确定删除，删除成功后提示用户删除成功。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0px;
margin: 0px;
/*box-sizing: border-box;*/
}
.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: #99ff00;
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>");
console.log("---",regions[city][i]);
op.text(regions[city][i]);
$("#region").append(op);
}
});
});

function add(){
var b1 = false;
var b2 = false;
var name = $("#name").val();
var sex = $("#sex").val();
var sel = $("#region").val();
var cs = $("#city option:selected").html();

if(name == ""){
b1 = false;

}else{
b1 = true;
}



if(b1 == false ){
alert("输入信息有误");
}else{
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name +"</td>" +
"<td>" + sex +"</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>住址：
<select id="city">
<option value="0">北京</option>
<option value="1">河南</option>
</select>
<select id="region">
</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" cellspacing="0" cellpadding="0" class="bg">
<tr>
<td><input type="checkbox" οnclick="cheAll()" id="che"></td>
<td>姓名</td>
<td>性别</td>

<td>住址</td>
<td>操作</td>
</tr>
</table>
</div>
</body>
</html>