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是和网页放在同一级目录下的

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。