<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.city{
display: none;
}
.city_first{
display: block;
}
table{
text-align: center;
}
</style>
<script src="libs/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#qbx").click(function(){
$("td :checkbox").prop("checked", false);
})
var alls=$("#cb").click(function(){
if (this.checked) {
$("td :checkbox").prop("checked",true);
} else{
$("td :checkbox").prop("checked",false);
};
})
$("#fx").click(function(){
$("td :checkbox").each(function(){
$(this).prop("checked", !$(this).prop("checked"));
});
});
$("#adrss").change(function(){
var index = $(this).get(0).selectedIndex;
//alert(index)
$('.city').hide().eq(index).show();
});
$("#add").click(function(){
var name = $("input:eq(0)").val();
var sex = $("#sex option:checked").text();
//alert(sex)
var bt = $("input:eq(1)").val();
var zz = $("#adrss option:checked").text();
var index = $("#adrss").get(0).selectedIndex;
//$("tr td:first-child").append("<input type='checkbox' />");
var dq = $(".city:eq("+index+") option:checked").text();
$("#trs").after("<tr><td><input type='checkbox' /></td><td>"+name+"</td>"+"<td>"+sex+"</td>"+"<td>"+bt+"</td>"+"<td>"+zz+"--"+dq+"</td><td><input type='submit' value='刪除'/></td></tr>")
$()
$("#tab tr:even").css('background-color','red');
$("#tab tr:odd").css('background-color','#FF00FF');
})
})
</script>
</head>
<body>
<center>
<table>
<tr>
<td>
姓名：<input type="text" name="user"/>
</td>
<td>
性別：<select id="sex">
<option id="nan">男</option>
<option id="nv">女</option>
</select>
</td>
<td>
生日：<input type="date" id="datas"/>
</td>
<td width="200px">
住址：<select id="adrss" >
<option>請選擇</option>
<option id="adrss1">北京</option>
<option id="adrss2">上海</option>
<option id="adrss3">廣州</option>
</select>
<select class="city city_first" style="float: right;">
<option>請選擇</option>
</select>
<select class="city">
<option>西二旗</option>
<option>海淀</option>
<option>上地</option>
</select>
<select class="city">
<option>浦東</option>
<option>浦西</option>
<option>廣東</option>
</select>
<select class="city">
<option>深圳</option>
<option>廣州</option>
<option>龍崗</option>
</select>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.city{
display: none;
}
.city_first{
display: block;
}
table{
text-align: center;
}
</style>
<script src="libs/jquery-1.11.0.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
$("#qbx").click(function(){
$("td :checkbox").prop("checked", false);
})
var alls=$("#cb").click(function(){
if (this.checked) {
$("td :checkbox").prop("checked",true);
} else{
$("td :checkbox").prop("checked",false);
};
})
$("#fx").click(function(){
$("td :checkbox").each(function(){
$(this).prop("checked", !$(this).prop("checked"));
});
});
$("#adrss").change(function(){
var index = $(this).get(0).selectedIndex;
//alert(index)
$('.city').hide().eq(index).show();
});
$("#add").click(function(){
var name = $("input:eq(0)").val();
var sex = $("#sex option:checked").text();
//alert(sex)
var bt = $("input:eq(1)").val();
var zz = $("#adrss option:checked").text();
var index = $("#adrss").get(0).selectedIndex;
//$("tr td:first-child").append("<input type='checkbox' />");
var dq = $(".city:eq("+index+") option:checked").text();
$("#trs").after("<tr><td><input type='checkbox' /></td><td>"+name+"</td>"+"<td>"+sex+"</td>"+"<td>"+bt+"</td>"+"<td>"+zz+"--"+dq+"</td><td><input type='submit' value='刪除'/></td></tr>")
$()
$("#tab tr:even").css('background-color','red');
$("#tab tr:odd").css('background-color','#FF00FF');
})
})
</script>
</head>
<body>
<center>
<table>
<tr>
<td>
姓名：<input type="text" name="user"/>
</td>
<td>
性別：<select id="sex">
<option id="nan">男</option>
<option id="nv">女</option>
</select>
</td>
<td>
生日：<input type="date" id="datas"/>
</td>
<td width="200px">
住址：<select id="adrss" >
<option>請選擇</option>
<option id="adrss1">北京</option>
<option id="adrss2">上海</option>
<option id="adrss3">廣州</option>
</select>
<select class="city city_first" style="float: right;">
<option>請選擇</option>
</select>
<select class="city">
<option>西二旗</option>
<option>海淀</option>
<option>上地</option>
</select>
<select class="city">
<option>浦東</option>
<option>浦西</option>
<option>廣東</option>
</select>
<select class="city">
<option>深圳</option>
<option>廣州</option>
<option>龍崗</option>
</select>
</td>
<td>
<input type="submit" value="添加" id="add" style="background-color: #0f0;"/>
</td>
</tr>
</table>
<input type="submit" name="qbx" id="qbx" value="全不選" />
<input type="submit" name="fx" id="fx" value="反選" />
<input type="submit" name="qs" id="qs" value="批量刪除" />
<table border="1" width="1200px" id="tab">
<tr id="trs">
<th><input type="checkbox" id="cb"/></th>
<th>姓名</th>
<th>性別</th>
<th>生日</th>
<th>住址</th>
<th>操作</th>
</tr>
</table>
</center>
</body>
</html>
<td>
<input type="submit" value="添加" id="add" style="background-color: #0f0;"/>
</td>
</tr>
</table>
<input type="submit" name="qbx" id="qbx" value="全不選" />
<input type="submit" name="fx" id="fx" value="反選" />
<input type="submit" name="qs" id="qs" value="批量刪除" />
<table border="1" width="1200px" id="tab">
<tr id="trs">
<th><input type="checkbox" id="cb"/></th>
<th>姓名</th>
<th>性別</th>
<th>生日</th>
<th>住址</th>
<th>操作</th>
</tr>
</table>
</center>
</body>
</html>