省级联动以及全选反选

来源：互联网发布：手机淘宝模板免费编辑：程序博客网时间：2024/05/17 02:06

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-1.11.1.min.js" ></script>
<script type="text/javascript">
$(function(){

var qu_bj = ["西二旗", "西三旗", "回龙观"];
var qu_sy = ["沈北新区", "和平区", "皇姑区"];

for(var i = 0; i < qu_bj.length; i++){
var $opt = $("<option></option>");
$opt.html(qu_bj[i]);
$opt.attr("value", qu_bj[i]);
if(qu_bj[i] == "西二旗"){
$opt.attr("selected", "selected");
}
$("#qu").append($opt);
}

$("#city").change(function(){
var city = $("#city").val();
if(city == "北京"){
add_opt(qu_bj);
}else if(city == "沈阳"){
add_opt(qu_sy);
}
})

function add_opt(arr){
$("#qu").children().remove();
for(var i = 0; i < arr.length; i++){
var $opt = $("<option></option>");
$opt.html(arr[i]);
$opt.attr("value", arr[i]);
$("#qu").append($opt);
}
}

function ghbs(){
$("#mytbody tr:even").css("background-color", "brown");
$("#mytbody tr:odd").css("background-color", "burlywood");
}

$("#sub").click(function(){
var name = $("#name").val();
var reg1 = /^[\x00-\xff]{3,30}$/;
var flag1 = false;
if(reg1.test(name)){
alert("姓名必须为3-30个汉字");
flag1 = false;
}else{
flag1 = true;
}

var sex = $("#sex").val();
//alert(sex);

var birth = $("#birth").val();
var flag2 = false;
if(birth.trim() == "" || birth == null){
alert("生日不能为空");
flag2 = false;
}else{
flag2 = true;
}

var city = $("#city").val();

var qu = $("#qu").val();

if(flag1 && flag2){
$("#mytable").attr("style", "display=block");

var $mytr = $("<tr></tr>");

var $mytd1 = $("<td></td>");
var $mycb = $("<input type='checkbox' />");
$mytd1.html($mycb);
var $mytd2 = $("<td></td>");
$mytd2.html(name);
var $mytd3 = $("<td></td>");
$mytd3.html(sex);
var $mytd4 = $("<td></td>");
$mytd4.html(birth);
var $mytd5 = $("<td></td>");
$mytd5.html(city+"-"+qu);
var $mytd6 = $("<td></td>");
var $mybtn = $("<button>删除</button>");
$mybtn.click(function(){
var isDel = confirm("是否确定删除？");
if(isDel){
$mybtn.parent().parent().remove();
ghbs();
if($("#mytbody").children() == 0){
$("#mytable").attr("style", "display=none");
}
}
})
$mytd6.html($mybtn);

$mytr.append($mytd1);
$mytr.append($mytd2);
$mytr.append($mytd3);
$mytr.append($mytd4);
$mytr.append($mytd5);
$mytr.append($mytd6);

$("#mytbody").append($mytr);

ghbs();
}

})

$("#quan_fan").click(function(){
if($("input[type='checkbox']:checked").length == 0){
$("input[type='checkbox']").each(function(){
$(this).prop("checked", true);
})
}else{
$("input[type='checkbox']").each(function(){
if($(this).is(":checked")){
$(this).prop("checked", false);
}else{
$(this).prop("checked", true);
}
})
}
})

$("#p_shan").click(function(){
if($("input[type='checkbox']:checked").length == 0){
alert("需要先选中数据！");
}else{
var isDel = confirm("是否确定删除？");
if(isDel){
$("input[type='checkbox']:checked").parent().parent().remove();
}
}
})
})
</script>
<style type="text/css">
th{
width: 110px;
}
td{
text-align: center;
}

</style>
</head>
<body>

姓名：<input id="name" type="text"/>
  
性别：<select id="sex" style="height: 20px;">
<option value="男">男</option>
<option value="女">女</option>
</select>
  
生日：<input id="birth" type="text" />
  
住址：<select id="city">
<option value="北京" selected="selected">北京</option>
<option value="沈阳">沈阳</option>
</select>
<select id="qu"></select>
    
<input type="button" id="sub" value="提交" /><br />

<button id="quan_fan" style="margin-left: 650px;margin-top: 10px;">全选/反选</button><button id="p_shan" style="margin-left: 20px;margin-top: 10px;">批量删除</button>

<table id="mytable" style="margin-top: 30px;display: none;" border="1px" cellspacing="0">
<thead>
<tr>
<th>
选择
</th>
<th>
姓名
</th>
<th>
性别
</th>
<th>
生日
</th>
<th>
住址
</th>
<th>
删除
</th>
</tr>
</thead>
<tbody id="mytbody"></tbody>
</table>
</body>
</html>

阅读全文

0 0