js-CSDN博客

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <style type="text/css">
   table{


       border: 1px solid black;
       border-collapse:collapse;
   }
   #onetr{
       background-color:blue;
       height: 40px;
   }
   tr{
       border: 1px solid green;
   }
   td{
       border: 1px solid green;
   }
   #e1,#e2,#e3,#e4{
       display: none;
   }

   </style>
   <script type="text/javascript">
   //全选功能遍历每一个tr 获取每一个tr的名字通过名字删除所选的每一行
   function one(as){
       var qx=document.getElementsByName('xuan');
       for(var i=0;i<qx.length;i++){
           qx[i].checked=as.checked;
}
}
//删除功能因为每一个删除为a标签所以获取名字来删除每一行获取a的父元素td -tr-table
//再从table中删除tr
window.οnlοad=function(){
   var mya=document.getElementsByTagName('a');
   for(var i=0;i<mya.length;i++){
       list=mya[i];
       list.οnclick=function(){


           var fu=this.parentNode.parentNode;
           var par=fu.parentNode;
           par.removeChild(fu);
}
}
}
//删除选中的每一行跟全选同理看哪一个被选中删除被选中的
function del(){
   var qx=document.getElementsByName('xuan');
   for(var i=qx.length-1;i>=0;i--){
       var mylist=qx[i];
       if(mylist.checked==true){
           var fu=mylist.parentNode.parentNode;
           var par=fu.parentNode;
           par.removeChild(fu);

}

   }
}
//添加功能因为学号的身份证号都有限制需要正则表达式进行验证如果输入的结果不符合人规范后边提示显示红色小框
function tianjia(){
   var xuehao=/^\d{7}$/;
   var shenfen=/^\d{17}(\w)$/;
   var vxm=document.getElementById('xm').value;
   var vnl=document.getElementById('nl').value;
   var vxh=document.getElementById('xh').value;
   var vsfs=document.getElementById('sfz').value;
   if(!xuehao.test(vxh)){
       e2.style.display="inline";

   }else{
       e2.style.display="none";
   }

if(vxm==''){
e1.style.display="inline";

   }else{
       e1.style.display="none";
   }

if(shenfen.test(vsfs)){
e4.style.display="inline";

   }else{
       e4.style.display="none";
   }
   if(vnl==''){
       e3.style.display="inline";

   }else{
       e3.style.display="none";
   }

}
var old='';
function myout(tr){
tr.style.background=old;

}
//鼠标移过时变色
function myover(tr){
old=tr.style.background;
tr.style.background='red';
}

</script>

</head>
<body>
<table>
   <tr id="onetr" οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
   <td id="onetd"><input type="checkbox" οnclick="one(this)">全选</td>
   <td id="two">姓名</td>
   <td id="three">学号</td>
   <td id="four">性别</td>
   <td id="five">年龄</td>
   <td id="six">身份证号</td>
   <td id="seven">所在班级</td>
<td id="eight">操作</td>
   </tr>
   <tr οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
       <td><input type="checkbox" name="xuan" ></td>
       <td>王永</td>
       <td>2012001</td>
       <td>男</td>
       <td>20</td>
       <td>130105198005160735</td>
       <td>12级信息一班</td>
       <td><a href="#">删除</a></td>
   </tr >
   <tr οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
       <td><input type="checkbox" name="xuan"></td>
       <td>白露</td>
       <td>2012002</td>
       <td>男</td>
       <td>20</td>
       <td>130105198005160735</td>
       <td>12级信息一班</td>
       <td><a href="#">删除</a></td>
   </tr>
   <tr οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
       <td><input type="checkbox" name="xuan"></td>
       <td>徐霞</td>
       <td>2012003</td>
       <td>男</td>
       <td>20</td>
       <td>130105198005160735</td>
       <td>12级信息一班</td>
       <td><a href="#">删除</a></td>
   </tr>
   <tr οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
       <td><input type="checkbox" name="xuan"></td>
       <td>杨杨</td>
       <td>2012004   </td>
       <td>男</td>
       <td>20</td>
       <td>130105198005160735</td>
       <td>12级信息一班</td>
       <td><a href="#">删除</a></td>
   </tr>
   <tr οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
       <td><input type="checkbox" name="xuan"></td>
       <td>张莉</td>
       <td>2012005</td>
       <td>男</td>
       <td>20</td>
       <td>130105198005160735</td>
       <td>12级信息一班</td>
       <td><a href="#">删除</a></td>
   </tr>
   <tr οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
       <td><input type="checkbox" name="xuan"></td>
       <td>杨宗楠</td>
       <td>2012006</td>
       <td>男</td>
       <td>20</td>
       <td>130105198005160735</td>
       <td>12级信息一班</td>
       <td><a href="#">删除</a></td>
   </tr>
   <tr οnmοuseοver="myover(this)" οnmοuseοut="myout(this)">
       <td><input type="button" value="删除所选" οnclick="del()"></td>
       <td><input type="text" id="xm"title="请输入姓名（必填）"><span id="e1"><img src="error.png"></span></td>
       <td><input type="text" id="xh"title="请输入学号（七位数字）"><span id="e2"><img src="error.png"></span></td>

       <td><select><option>男</option><option>女</option></select></td>
       <td><input type="text" id="nl" title="请输入年龄"><span id="e3"><img src="error.png"></span></td>
       <td><input type="text" id="sfz"title="请输入身份证号"><span id="e4"><img src="error.png"></span></td>
       <td>
           <select>
               <option>12级信息一班</option>
               <option>12级信息二班</option>
               <option>12级信息三班</option>
               <option>12级信息四班</option>
           </select>
       </td>
       <td><input type="submit" οnclick="tianjia()" value="添加 "></td>
   </tr>