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