js小案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.a1{
width: 600px;
}
tr:nth-child(odd){
background-color: red;
}
tr:nth-child(even){
background-color: pink;
}
</style>
<script type="text/javascript" src="js/jquery-1.8.2.min.js" ></script>
<script>
$(function(){
$("#tj").click(function(){
var name =$("#name").val();
var lb =$("select :selected").val();
var riqi = $("#riqi").val();
var pro =$("#pro option:selected").text();
var city =$("#city").val();
if(name==undefined|name==""){
alert("名称不能小于3个字符");
return;
}
var tr ="<tr>"+
"<td><input type='checkbox' name='ck'></td>"+
"<td>"+name+"</td>"+
"<td>"+lb+"</td>"+
"<td>"+riqi+"</td>"+
"<td>"+pro+"-"+city+"</td>"+
"<td><button id='sc'>删除</button></td>"+
"</tr>"
$("#tb").append(tr);
})
/*$("#qx").click(function(){
$(":checkebox:checked").attr("checked",true);
})*/
$("#qx").click(function(){
if($(":checkbox").attr("checked")){
$("[name=ck]").attr("checked",true);
}else{
$("[name=ck]").attr("checked",false);
}
})
$("#plsc").click(function(){
var plsc =$(":checkbox:gt(0):checked");
if(plsc.length==0){
alert("请选择数据");
}else{
alert("删除成功")
plsc.each(function(){
$(this).parent().parent().remove();
})
}
})
$("#sc").live("click",function(){
if(confirm("是否要删除编号")){
alert("删除成功")
$(this).parent().parent().remove();
}else{
alert("请选择数据");
}
})
var c =[
["朝阳区","大兴区","海淀区"],
["和平区","河东区","河西区"],
["黄埔区","徐汇区","海宁去"],
];
$("#pro").change(function(){
$("#ct").siblings().remove();
var sheng =$(this).val();
/* alert(sheng)*/
for (var i = 0; i < c[sheng].length; i++) {
var aa=$("<option></option>");
aa.html(c[sheng][i]);
$("#city").append(aa);
}
})
$(".a6").val("");
})
</script>
</head>
<body>
<form>
姓名<input type="text" id="name">
性别 <select id="lb">
<option value="男">男</option>
<option value="女">女</option>
</select>
生日<input type="date" id="riqi">
住址<select id="pro" class="a6">
<option value="0">北京</option>
<option value="1">天津</option>
<option value="2">上海</option>
</select>
<select id="city">
<option value="西二旗">西二旗</option>
<option id="ct">请选择</option>
</select>
<input type="button" value="添加" id="tj" />
</form>
<br />
<br />
<input type="button" value="全选" id="qx1"style="background-color: yellow;">
<input type="button" value="批量删除" id="plsc" style="background-color: gray;" >
<table class="a1" cellpadding="0" cellspacing="0" border="1px" id="tb">
<tr>
<td><input type="checkbox" id="qx"></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td align="center">住址</td>
<td align="center">操作</td>
</tr>
</table>
</body>
</html>