<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div{
border: 1px solid black;
width: 800px;
height: 500px;
}
#div1{
margin-top: 40px;
margin-left: 40px;
}
.div .bg tr:nth-child(1){
background: gold;
}
.div .bg tr:nth-child(2n){
background: greenyellow;
}
.btn{
background-color: #FFD700;
}
</style>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var city=['北京','河北'];
var district=[['海淀区','朝阳','东城'],
['保定','石家庄','秦皇岛']
];
window.οnlοad=function(){
createCity();
document.getElementById("city").οnchange= createDistrict;
};
function createCity(){
//获得1级菜单select
var ci = document.getElementById("city");
//为1级菜单select添加option
for(var i in city){
var op = new Option(city[i],city[i]);
ci.options.add(op);
}
}
function createDistrict(){
//获取当前选中的一级菜单的选项的下标
var index = document.getElementById("city").selectedIndex;
//获得2级菜单select
var di = document.getElementById("district");
//清空二级菜单选项
di.options.length=0;
//为2级菜单select添加option
for(var i in district[index]){
var op = new Option(district[index][i],district[index][i]);
di.options.add(op);
}
}
function add(){
//数字与字母的组合
var zhang=/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
var b1 = false;
var b2 = false;
var b3 = false;
var name = $("#name").val();
var birthday1 = $("#aihao1").val();
var birthday2 = $("#aihao2").val();
var man = $("#man").val();
// var woman = $("#woman").val();
var sel = $("#district").val();
var cs = $("#city").val();
if(name == ""){
b1 = false;
}else if(name.length < 6 || name.length >13 || !zhang.test($name)){
b1 = false;
}else{
b1 = true;
}
if(birthday1 == ""){
b2 = false;
}else{
b2 = true;
}
if(birthday2 == ""){
b3 = false;
}else{
b3 = true;
}
if(b1 == false || b2 == false || b3 == false){
alert("输入信息有误");
}else{
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name +"</td>" +
"<td>" + man +"</td>" +
"<td>" + birthday1+birthday2 +"</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="div">
<div id="div1">
姓名:<input type="text" id="name" /><br /><br />
性别:<input type="radio" id="man" name="sex" value="男" checked="checked" />男<br />
<input id="woman" type="radio" name="sex" value="女" />女<br /><br />
爱好:<input type="checkbox" id="aihao1" value="唱歌" />唱歌<br />
<input type="checkbox" id="aihao2" value="睡觉" checked="checked" />睡觉<br />
<input type="checkbox" id="aihao3" value="游戏" />游戏<br />
籍贯:<select id="city"></select>
<select id="district"></select><br /><br />
<button οnclick="add()" class="btn">注册</button>
</div>
</div>
<div class="div">
<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>
<td>操作</td>
</tr>
</table>
<input type="button" οnclick="delAll()" value="批量删除" />
<input type="button" οnclick="che()" value="全选/反选" />
</div>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.div{
border: 1px solid black;
width: 800px;
height: 500px;
}
#div1{
margin-top: 40px;
margin-left: 40px;
}
.div .bg tr:nth-child(1){
background: gold;
}
.div .bg tr:nth-child(2n){
background: greenyellow;
}
.btn{
background-color: #FFD700;
}
</style>
<script src="../libs/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
var city=['北京','河北'];
var district=[['海淀区','朝阳','东城'],
['保定','石家庄','秦皇岛']
];
window.οnlοad=function(){
createCity();
document.getElementById("city").οnchange= createDistrict;
};
function createCity(){
//获得1级菜单select
var ci = document.getElementById("city");
//为1级菜单select添加option
for(var i in city){
var op = new Option(city[i],city[i]);
ci.options.add(op);
}
}
function createDistrict(){
//获取当前选中的一级菜单的选项的下标
var index = document.getElementById("city").selectedIndex;
//获得2级菜单select
var di = document.getElementById("district");
//清空二级菜单选项
di.options.length=0;
//为2级菜单select添加option
for(var i in district[index]){
var op = new Option(district[index][i],district[index][i]);
di.options.add(op);
}
}
function add(){
//数字与字母的组合
var zhang=/[0-9]+[a-zA-Z]+[0-9a-zA-Z]*|[a-zA-Z]+[0-9]+[0-9a-zA-Z]*/;
var b1 = false;
var b2 = false;
var b3 = false;
var name = $("#name").val();
var birthday1 = $("#aihao1").val();
var birthday2 = $("#aihao2").val();
var man = $("#man").val();
// var woman = $("#woman").val();
var sel = $("#district").val();
var cs = $("#city").val();
if(name == ""){
b1 = false;
}else if(name.length < 6 || name.length >13 || !zhang.test($name)){
b1 = false;
}else{
b1 = true;
}
if(birthday1 == ""){
b2 = false;
}else{
b2 = true;
}
if(birthday2 == ""){
b3 = false;
}else{
b3 = true;
}
if(b1 == false || b2 == false || b3 == false){
alert("输入信息有误");
}else{
$(".bg").append("<tr>" +
"<td><input type='checkbox' name='ck' ></td>" +
"<td>" + name +"</td>" +
"<td>" + man +"</td>" +
"<td>" + birthday1+birthday2 +"</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="div">
<div id="div1">
姓名:<input type="text" id="name" /><br /><br />
性别:<input type="radio" id="man" name="sex" value="男" checked="checked" />男<br />
<input id="woman" type="radio" name="sex" value="女" />女<br /><br />
爱好:<input type="checkbox" id="aihao1" value="唱歌" />唱歌<br />
<input type="checkbox" id="aihao2" value="睡觉" checked="checked" />睡觉<br />
<input type="checkbox" id="aihao3" value="游戏" />游戏<br />
籍贯:<select id="city"></select>
<select id="district"></select><br /><br />
<button οnclick="add()" class="btn">注册</button>
</div>
</div>
<div class="div">
<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>
<td>操作</td>
</tr>
</table>
<input type="button" οnclick="delAll()" value="批量删除" />
<input type="button" οnclick="che()" value="全选/反选" />
</div>
</body>
</html>