<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.botn {
width: 80px;
height: 30px;
background-color: greenyellow;
border: 1px solid black;
border-radius:5px ;
}
td{
border: 1px solid black;
}
span {
color: red;
}
.quan{
margin-top: 20px;
margin-left: 450px;
height: 25px;
background-color:yellow;
border: 1px solid black;
border-radius:5px ;
}
.pi{
margin-top: 20px;
height: 25px;
background-color:red;
border: 1px solid black;
border-radius:5px ;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
function btn(){
var flag1 = false;
var name = $("#name").val();
if(name.length < 3 || name.length > 30) {
$("#sname").html("用户名不小于3个字符且不大于30个字符")
flag1 = false;
} else {
$("#sname").html("")
flag1 = true;
}
var flag2 = false;
var birth = $("#birth").val();
if(birth.length == 0) {
$("#sbirth").html("生日不能为空")
flag2 = false;
} else {
$("#sbirth").html("")
flag2 = true;
}
if(flag1 && flag2) {
var name = $("#name").val();
var sex = $("#sex").val();
var birth=$("#birth").val();
var province=$("#province").find("option:selected").text();
var city=$("#city").find("option:selected").text();
var tr=$("<tr></tr>")
var td=$("<td> <input type='checkbox' name='ck'/></td>")
var td1=$("<td></td>").html(name);
var td2=$("<td></td>").html(sex);
var td3=$("<td></td>").html(birth);
var td4=$("<td></td>").html(province+"-"+city);
var td6=$("<td><button>删除</button></td>");
tr.append(td);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td6);
$("table").append(tr);
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
$("button").unbind("click");
$("button").click(function(){
var shanchu=window.confirm("是否删除"+name);
if(shanchu){
$(this).parent().parent().remove();
var success=window.confirm("删除成功");
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
}else{
return false;
}
});
}
}
//城市二级联动
var citys = new Array(); //一个二维数组,用于存储省市,依次对应
citys[1] = new Array("西二旗", "海淀");
citys[2] = new Array("中牟", "新区");
citys[3] = new Array("固安", "衡水");
function change(value) {
document.getElementById("city").options.length = 0;
for(
var m = 0; m < citys[value].length; m++) {
var o = document.createElement("option");
var node = document.createTextNode(citys[value][m] + "");
o.appendChild(node);
document.getElementById("city").appendChild(o);
}
}
</script>
<script>
function ckAll(){
var cks=document.getElementsByName("ck");
for(var i=0;i<cks.length;i++){
cks[i].checked=!cks[i].checked;
}
}
function delAll(){
var len=$("input[name='ck']:checked");
if(len.length==0){
alert("请选择要删除的数据");
}else{
$(len).parent().parent().remove();
}
}
</script>
</head>
<body>
<form>
姓名:<input type="text" id="name" /><span id="sname"></span>
性别:<select id="sex">
<option checked="checked">男</option>
<option>女</option>
</select>
生日:<input type="text" id="birth" /><span id="sbirth"></span>
住址:<select class="se1" id="province" οnchange="change(this.value)">
<option value="1" checked="checked">北京</option>
<option value="2">郑州</option>
<option value="3">河北</option>
</select>
<select class="se2" id="city">
<option value="0" checked="checked">西二旗</option>
</select>
<input class="botn" type="button" οnclick="btn()" value="添加" /><br />
<input class="quan" type="button" οnclick="ckAll()" value="全选/反选" />
<input class="pi" type="button" οnclick="delAll()" value="批量删除" />
</form>
<table style="width: 600px;border:1px solid black;margin-top: 15px;" cellspacing="0px" cellpadding="5px">
<tr style="background-color: #999999">
<td><input type="checkbox" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
</table>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.botn {
width: 80px;
height: 30px;
background-color: greenyellow;
border: 1px solid black;
border-radius:5px ;
}
td{
border: 1px solid black;
}
span {
color: red;
}
.quan{
margin-top: 20px;
margin-left: 450px;
height: 25px;
background-color:yellow;
border: 1px solid black;
border-radius:5px ;
}
.pi{
margin-top: 20px;
height: 25px;
background-color:red;
border: 1px solid black;
border-radius:5px ;
}
</style>
<script type="text/javascript" src="js/jquery-1.11.1.js"></script>
<script>
function btn(){
var flag1 = false;
var name = $("#name").val();
if(name.length < 3 || name.length > 30) {
$("#sname").html("用户名不小于3个字符且不大于30个字符")
flag1 = false;
} else {
$("#sname").html("")
flag1 = true;
}
var flag2 = false;
var birth = $("#birth").val();
if(birth.length == 0) {
$("#sbirth").html("生日不能为空")
flag2 = false;
} else {
$("#sbirth").html("")
flag2 = true;
}
if(flag1 && flag2) {
var name = $("#name").val();
var sex = $("#sex").val();
var birth=$("#birth").val();
var province=$("#province").find("option:selected").text();
var city=$("#city").find("option:selected").text();
var tr=$("<tr></tr>")
var td=$("<td> <input type='checkbox' name='ck'/></td>")
var td1=$("<td></td>").html(name);
var td2=$("<td></td>").html(sex);
var td3=$("<td></td>").html(birth);
var td4=$("<td></td>").html(province+"-"+city);
var td6=$("<td><button>删除</button></td>");
tr.append(td);
tr.append(td1);
tr.append(td2);
tr.append(td3);
tr.append(td4);
tr.append(td6);
$("table").append(tr);
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
$("button").unbind("click");
$("button").click(function(){
var shanchu=window.confirm("是否删除"+name);
if(shanchu){
$(this).parent().parent().remove();
var success=window.confirm("删除成功");
$("table tr:odd").css("background","#999999");
$("table tr:even").css("background","#eeeeee");
}else{
return false;
}
});
}
}
//城市二级联动
var citys = new Array(); //一个二维数组,用于存储省市,依次对应
citys[1] = new Array("西二旗", "海淀");
citys[2] = new Array("中牟", "新区");
citys[3] = new Array("固安", "衡水");
function change(value) {
document.getElementById("city").options.length = 0;
for(
var m = 0; m < citys[value].length; m++) {
var o = document.createElement("option");
var node = document.createTextNode(citys[value][m] + "");
o.appendChild(node);
document.getElementById("city").appendChild(o);
}
}
</script>
<script>
function ckAll(){
var cks=document.getElementsByName("ck");
for(var i=0;i<cks.length;i++){
cks[i].checked=!cks[i].checked;
}
}
function delAll(){
var len=$("input[name='ck']:checked");
if(len.length==0){
alert("请选择要删除的数据");
}else{
$(len).parent().parent().remove();
}
}
</script>
</head>
<body>
<form>
姓名:<input type="text" id="name" /><span id="sname"></span>
性别:<select id="sex">
<option checked="checked">男</option>
<option>女</option>
</select>
生日:<input type="text" id="birth" /><span id="sbirth"></span>
住址:<select class="se1" id="province" οnchange="change(this.value)">
<option value="1" checked="checked">北京</option>
<option value="2">郑州</option>
<option value="3">河北</option>
</select>
<select class="se2" id="city">
<option value="0" checked="checked">西二旗</option>
</select>
<input class="botn" type="button" οnclick="btn()" value="添加" /><br />
<input class="quan" type="button" οnclick="ckAll()" value="全选/反选" />
<input class="pi" type="button" οnclick="delAll()" value="批量删除" />
</form>
<table style="width: 600px;border:1px solid black;margin-top: 15px;" cellspacing="0px" cellpadding="5px">
<tr style="background-color: #999999">
<td><input type="checkbox" /></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
</table>
</body>
</html>