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是和网页放在同一级文件夹下的
Jquery 实现动态加入table tr 和删除tr 以及checkbox的全选 和 获取加入TR删除TR后的数据的更多相关文章
- 使用vue.js实现checkbox的全选和多个的删除功能
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 3 ...
- Android高级控件（一）——ListView绑定CheckBox实现全选，增加和删除等功能
Android高级控件(一)--ListView绑定CheckBox实现全选,增加和删除等功能 这个控件还是挺复杂的,也是项目中应该算是比较常用的了,所以写了一个小Demo来讲讲,主要是自定义adap ...
- Android高级控件（一）——ListView绑定CheckBox实现全选，添加和删除等功能
Android高级控件(一)--ListView绑定CheckBox实现全选,添加和删除等功能 这个控件还是挺复杂的.也是项目中应该算是比較经常使用的了,所以写了一个小Demo来讲讲,主要是自己定义a ...
- jquery-防多店铺购物车结算全选，单选，及删除，价格计算
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- JQuery 判断checkbox是否选中，checkbox全选，获取checkbox选中值
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jquery checkbox 选中 全选 插件
checkbox 选中 全选 在项目中经常用到,但是不同的程序员写出的东西各有差异,在此整合了jquery checkbox插件,用起来很方便,也总结了我们项目中通常会出现问题的地方,一行代码搞定. ...
- jquery中checkbox的全选与反选
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title> ...
- jquery控制动态生成的gridview中多列checkbox的全选反选及自动判断是否全选状态
动态生成的Gridview的前台html代码如下: <table class="usertableborder" cellspacing="0" ...
- JQuery 全选 反选 获取Table 中指定td的元素值
//全选 function initTableCheckbox() { var $thr = $('table thead tr'); var $checkAllTh = $('<th>& ...
随机推荐
- 【Tomcat】使用Eclipse运行Tomcat7源码
1.搭建开发环境 a.下载好tomcat7源码包 b.安装好jdk7,及设置好环境变量 c.安装好ant,及设置好环境变量,用于预编译tocmat源码. d.以上步骤准备好我们就可以开始进入源码的预编 ...
- radio与checkbox的选中事件
<一>判断checkbox的选中事件 var result=$(this).find("input[type='checkbox']").prop("chec ...
- Qt实战之开发CSDN下载助手 （3）（结束篇）
再次申明下,开发这款助手,主要是用来学习交流,并不是用来开发什么刷积分的软件. 好了,言归正传,这次,主要的分析下CSDN的下载,评论,验证码获取机制等等. 好,回到第二篇,当我们成功登陆时,CSDN ...
- Nginx 的 Echo 模块 —— echo-nginx-module（转）
Nginx 有个 echo 模块可以用来输出一些简单的信息,例如: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 2 ...
- Linux软件安装包中devel与非devel包之间的区别
带devel(develop)的包,俗称开发包.功能上与普通包相同,但体积更大使用rpm -qi看看这两类包的区别: # rpm -qi glibc-devel-2.12-1.149.el6.x86_ ...
- HDU 1130 How Many Trees?
裸的卡特兰数 C++#include<iostream> #include<cstdio> using namespace std; #define base 10000 #d ...
- [置顶] JDK-CountDownLatch-实例、源码和模拟实现
Conception A synchronization aid that allows one or more threads to wait until a set of operations b ...
- IOS文件沙盒
在进行IPhone开发的时候,常常需要将简单的数据保存到文件中,以便下次再重新打开的时候能够读取文件中保存的数据. 下面就来做一个简单的demo: 步骤: 1.创建一个SingleView项目,带有x ...
- Linux-中断和中断处理
1.中断 #中断使得硬件得以发出通知给处理器,本质上是一种电信号 #中断随时能够产生.内核随时会被打断 #不同设备的中断不同,每一个中断都通过一个唯一的数字标识.称为IRQ(中断请求) 2.中断处理程 ...
- hdu3416 Marriage Match IV【最短路+最大流】
转载请注明出处,谢谢:http://www.cnblogs.com/KirisameMarisa/p/4297581.html ---by 墨染之樱花 题目链接:http://acm.hdu.ed ...