初学Html5+CSS之用div创建数据表布局+删除+批量删除+全选+内容判断

效果图

需要导入的包如下

代码如下

<!DOCTYPE html>
<html >
<head>
<meta charset="utf-8" />
<title></title>
<style>
tr{
text-align: center;
background-color: #ECECEC;
}
tr:hover{
background-color: #FFF;
}

</style>
<script type="text/javascript" src="js/angular.min.js" ></script>
<script type="text/javascript" src="js/jquery-2.1.0.js" ></script>
<script>

$(function(){
var qu1=["西二旗","海淀","朝阳"];
var qu2=["涟水","高沟","沭阳"];
var qu3=["天津1","天津2","天津3"];
var quzong=[];
zhuarr=[{"shi":"北京","qu":""+qu1+""},{"shi":"淮安","qu":""+qu2+""},{"shi":"天津","qu":""+qu3+""}];
var shi=$("#shi");
var qu=$("#qu");
//为市复初值
for(var z=0;z<zhuarr.length;z++){
var opshi=$("<option>"+zhuarr[z].shi+"</option>");
shi.append(opshi);
}
//为区复初值
var qq=zhuarr[0].qu.split(",");
quzong.splice(0,quzong.length);
quzong=qq;
for(var q=0;q<quzong.length;q++){
var opqu=$("<option>"+quzong[q]+"</option>");
qu.append(opqu);
}
//shi的改变事件
shi.change(function(){
var y=0;
var op=$("#qu option");
op.remove();
var s1=$("#shi option:selected").val();
for(var z=0;z<zhuarr.length;z++){
var ss=zhuarr[z].shi;
if(ss==s1){
y=z;
break;
}
}
var qqq=zhuarr[y].qu.split(",");
quzong.splice(0,quzong.length);
quzong=qqq;
for(var q=0;q<quzong.length;q++){
var opqu=$("<option>"+quzong[q]+"</option>");
qu.append(opqu);
}
});


$("#addbut").click(function(){
var name=$("#name").val();
var sex=$("#sex :selected").val();
var ri=$("#ri").val();
var shi1=$("#shi :selected").val();
var shengri="";
var qu1=$("#qu :selected").val();
var mytable=$("#mytable");
var kai1=false;
var kai2=false;
if(name.length<=30&name.length>=3){
kai1=true;
}
if(ri!=null&ri!=""){
if(riNumber(ri)){
var sri=parseInt(ri);
var tt=new Date(sri);
var nian=tt.getFullYear();
var yue=tt.getMonth();
var dd=tt.getDate();

shengri=nian+"-"+yue+"-"+dd;
kai2=true;
}

}
if(kai1&kai2){
var tr=$("<tr><td><input type='checkbox' onclick='dxshan(this)'/></td><td>"+name+"</td><td>"+sex+"</td><td>"+shengri+"</td><td>"+shi1+"-"+qu1+"</td><td><button onclick='shan(this)'>删除</button></td></tr>");
mytable.append(tr);
}else{
alert("输入的数据有误!")
}
});
//验证字符串是否是数字
function riNumber(theObj) {
 var reg = /^[0-9]+.?[0-9]*$/;
 if (reg.test(theObj)) {
   return true;
 }
 return false;
}

$("#xuan").click(function(){
var xarr=$("[type='checkbox']");
for(var i=0;i<xarr.length;i++){
xarr[i].checked=this.checked;
}

});
});
function shan(obj){
var tr=$(obj).parent().parent();
var r=confirm("是否确认删除?");
if (r==true)
{
   tr.remove();
   alert("删除成功!");
}


}

function dxshan(obj){
var quxuan=$("#xuan");
quxuan[0].checked=false;
}
function pi(){
var chshan=$("[type='checkbox']");
if(chshan.length!=0){
var r=confirm("是否确认删除?");
if (r==true)
{
for(var i=0;i<chshan.length;i++){
if(chshan[i].checked){
if(i!=0){
  var tr=$(chshan[i]).parent().parent();
tr.remove();
}
}else{
if(i==chshan.length-1){
alert("没有选择删除对象")
}
}
}
}
}
var xuan=$("#xuan");
xuan[0].checked=false;
}
var j=0;
function quan(){
j++;
var ch=$("[type='checkbox']");
if(j%2==1){
for(var i=0;i<ch.length;i++){
ch[i].checked=true;
}
}else{
for(var i=0;i<ch.length;i++){
ch[i].checked=false;
}
}
}
</script>
</head>
<body>
<div style="width: 700px;margin: auto;" >
姓名:<input type="text" id="name" />
性别:<select id="sex">
<option selected="selected">男</option>
<option>女</option>
</select>
生日:<input type="text" id="ri"/>
住址:<select  id="shi"></select>
<select id="qu"></select>
<button id="addbut">添加</button>
</div>
<table id="mytable" width="500px" style="margin: auto;" border="0" cellspacing="1" bgcolor="black">
<tr style="text-align: right;">
<td colspan="6"><button onclick="quan()">全选/反选</button><button onclick="pi()">批量删除 </button></td>
</tr>
<tr style="background-color: #999999;">
<th><input type="checkbox" id="xuan" checked="false"/></th>
<th>姓名</th>
<th>性别</th>
<th>生日</th>
<th>住址</th>
<th>删除</th>
</tr>
</table>
</body>
</html>