Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据

关于jquery实现动态加入table tr的问题我也不多说了 上面代码非常多地方都有凝视的

关于返回的 编辑后的table 数据 我这里想说的是我直接把他保存成一个连接起来的字符串了 格式 str=XXX | XXX | XXX , XXX | XXX | XXX , XXX | XXX | XXX

你也能够保存成对象类型的  我是为了方便后台的操作才这样做的

话不多说直接代码：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
</title>
<script src="jquery-1.8.2.min.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
var count=4;//行数ID后缀
var delid="";//删除的ID
var addid="";//加入ID的前缀
//var a= str.split(",");
function addTr2(tab, row){
    var trHtml="<tr id='row"+count+"' align='center'><td width='20%'> <input id='allCkb"+count
	+"' name='person' value='"+count+"' type='checkbox'/></td><td width='30%'><input type='text' value='"+count+"' id='title"+count
	+"' name=''></td><td width='30%'><input type='text' id='name"+count
	+"' name=''></td><td width='30%'><input type='text' id='sex"+count
	+"' name=''></td></tr>";
    addTr(tab, row, trHtml);
	addid+=count+",";
	count++;
  }
 function addTr(tab, row, trHtml){
     //获取table最后一行 $("#tab tr:last")
     //获取table第一行 $("#tab tr").eq(0)
     //获取table倒数第二行 $("#tab tr").eq(-2)
     var $tr=$("#"+tab+" tr").eq(row);
     if($tr.size()==0){
        alert("指定的table id或行数不存在！");
        return;
     }
     $tr.after(trHtml);
	 }
//全选功能
//name是你点击出发chexbox的name itemname 是你要操作cheeckbox的name
function qcheckbox(name,itemname){
   if($("input[name='"+name+"']:checkbox").attr("checked"))
   $("input[name='"+itemname+"']:checkbox").attr("checked",true);
   else
   $("input[name='"+itemname+"']:checkbox").attr("checked",false);
}
//chname你选择的checbox的name
function del(chname){
	 var chobj= $("input[name='"+chname+"']:checkbox");
     chobj.each(function(){
		 if($(this).attr("checked")){
			 delid += $(this).val()+",";
			 $(this).parent().parent().remove();
		 }
	  })

}
function tableinfo(){
   var delobj= delid.split(",");
   var addobj= addid.split(",");
   var str="";
   for(var i=1;i<=3;i++){
     var title=$('#title'+i).val();
	 var name=$('#name'+i).val();
	 var sex=$('#sex'+i).val();
	 str+=title+"|"+name+"|"+sex+",";
   }
   for(var j=0;j<addobj.length-1;j++){
	   var a=true;
	  for(var k=0;k<delobj.length-1;k++){
	     if(delobj[k]==addobj[j]){
			 a=false;
			 break;
		 }
      }
	  if(a){
        var title=$('#title'+addobj[j]).val();
	    var name=$('#name'+addobj[j]).val();
	    var sex=$('#sex'+addobj[j]).val();
	    str+=title+"|"+name+"|"+sex+",";
	  }
   }
   alert(str);
}
</script>
</head>
<body>
<input type="button" value="Add" id="b1" onclick="addTr2('tab', -3)">
<input type="button" value="Delete" onclick="del('person');">
<input type="button" value="取值" onclick="tableinfo()">
<table id="tab" cellspacing="3" cellpadding="3" border="1">
<tr  align='center'>
    <td width='20%'> <input id="allCkb" onclick="qcheckbox('qperson','person')" type="checkbox" name="qperson"/></td>
	<td width='30%'> 职位</td>
	<td width='30%'> 名称</td>
	<td width='30%'> 分数</td>
</tr>
<tr id="row1"  align='center'>
    <td width='20%'> </td>
	<td width='30%'>联系人<input type="hidden" id="title1"  value="联系人"/></td>
	<td width='30%'><input type="text" id="name1" name=""></td>
	<td width='30%'><input type="text" id="sex1" name=""></td>
</tr>
<tr id="row2" align='center'>
<td width='20%'> </td>
	<td width='30%'>老板<input type="hidden" id="title2"  value="老板"/></td>
	<td width='30%'><input type="text" id="name2" name=""></td>
	<td width='30%'><input type="text" id="sex2" name=""></td>
</tr>
<tr id="row3" align='center'>
<td width='20%'>  </td>
	<td width='30%'>哈哈 <input type="hidden" id="title3"  value="哈哈"/></td>
	<td width='30%'><input type="text" id="name3" name=""></td>
	<td width='30%'><input type="text" id="sex3" name=""></td>
</tr>
<tr align="center">
    <td width="30%" colspan="2">分数合计</td>
    <td width="30%" colspan="2">80</td>
</tr>
<tr align="center">
    <td width="30%" colspan="2">人员合计</td>
    <td width="30%" colspan="2">80</td>
</tr>
</table>
</body>
</html>

注意要把jquery的js引用了 我这里的jquer的JS是和网页放在同一级文件夹下的