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>