jquery table表格添加删除数据（含批量删除，全选全不选和简单的表单验证）

开始先导包...

//先建立输入框和按钮

用户:<input type="text" id="yhm" />
 密码:<input type="text" id="pwd" />
 邮箱:<input type="text" id="yx" />
 <input type="button" id="tj" value="添加" />
 <input type="button" id="duoxuan" value="批量删除" />
 <br />
 <hr />

//建立一个表格
 <table id="tab" border="1px" cellpadding="0px" cellspacing="0px">
  <tr style="background: yellow; color: red;">
   <th><input type="checkbox" class="ck" id="qx"></th>
   <th>用户名</th>
   <th>密码</th>
   <th>邮箱</th>
   <th>操作</th>
  </tr>
 </table>

//开始调用script方法
 <script>

//获取添加按钮的ID并且设置点击事件
  $("#tj").click(function(){

//获取用户名框的输入内容并且判断
   var name = $("#yhm").val();
   if(name==""){
    alert("用户名不能为空")
     return;
   }

//获取密码框内容并且判断
   var pwd = $("#pwd").val();
   if(pwd==""||pwd.length>6){
    alert("密码不能为空或长度大于6")
     return;
   }

//获取邮箱输入框内容并且判断
   var yx = $("#yx").val(); 

//判断输入的内容是否含有@字符
   if(yx.indexOf("@")==-1){
    alert("请输入正确的邮箱格式")
     return;
   }

//开始添加数据
   $("#tab").append("<tr><td><input type='checkbox'></td><td>"+name+"</td><td>"+pwd+"</td><td>"+yx+"</td><td><input type='button' value='删除' id='sc' onclick='sc(this)'></td></tr>")

//展示标题栏

$("#tab").show();
  })

//设置删除的点击事件
  function sc(t){
   t.parentNode.parentNode.remove();

//一个判断删除的是不是最后一条内容如果是就隐藏整个表格

//有点缺陷隐藏了就出不来了

var $tr = $("input[type=checkbox]");
    if($tr.length == 1) {
     $("#tab").hide();     
    }
  }
  //设置批量删除的点击事件
  $("#duoxuan").click(function(){
   var pl = $("input[type=checkbox]:checked");
   if(pl.length==0){
    alert("请至少选择一个");
    return
   }
   for(i=0;i<pl.length;i++){
    var pls = pl[i];
    pls.parentNode.parentNode.remove();
   }
   if(pls.length==1){
    $("#tab").empty();
   }
  })

//设置一个flag来判断有没有选中
  var flag = true;
  $("#qx").click(function(){
   var ckbox = $("input[type=checkbox]");
   for(var i=0;i<ckbox.length;i++){
    ckbox[i].checked=flag;
   }
   flag =!flag;
  })
 </script>