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

时间：2024-07-13 16:33:56

关于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是和网页放在同一级文件夹下的

相关文章