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>& ...
随机推荐
- objective-c 中随机数的用法 （3种：arc4random() 、random()、CCRANDOM_0_1() ）
1.随机数的使用 1).arc4random() 比较精确不需要生成随即种子 使用方法 : 通过arc4random() 获取0到x-1之间的整数的代码如下: int value = arc ...
- BZOJ 2818 GCD（欧拉函数）
题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=37161 题意:gcd(x, y) = 质数, 1 <= x, ...
- hadoop 主节点存储告警
之前只他调整过dfs 的存储目录到最大配额的目录,其它没有处理(就是在默认的/ 目录下,而这个目录的存储配额只有50G) 运行一周的时间不到,集群开始告警,查看是目录/ 的存储占用超过了60% 再查看 ...
- Zencart先生成订单后付款，类似淘宝后台修改订单价格
Zencart 使用 Paypal 付款,会出现漏单的情况,即 paypal 已经收到客户的付款,但是网站后台没有客户的订单.导致 paypal 漏单的原因大致会是当客户跳转到Paypal 网站付款完 ...
- app 转caf 音频 代码
afconvert /Users/xiaoye/Downloads/cat.caf /Users/xiaoye/Downloads/cat1.caf -d ima4 -f caff -v;
- ssh无密登录
ssh登录一般两种方式: 1.密码登录 2.密钥验证无需密码 使用方式:1.生成密钥 2.将公钥追加到authorized_keys中,需要注意的是执行权限需为600,这里因而第一次添加使用的是> ...
- ASP.net WebAPI 上传图片
[HttpPost] public Task<Hashtable> ImgUpload() { // 检查是否是 multipart/form-data if (!Request.Cont ...
- Android 进程和线程模型
Android进程模型 在安装Android应用程序的时候,Android会为每个程序分配一个Linux用户ID,并设置相应的权限,这样其它应用程序就不能访问此应用程序所拥有的数据和资源了. 在 Li ...
- vs2013 linq to mysql
安装文件 1.下载安装文件 2.创建项目 3.创建mysql数据连接 4.新建ADO.NET数据模型 项目实现代码 using (WorkerContainer db = new WorkerCont ...
- MyReport报表引擎2.6.5.0新功能
新的文本渲染引擎,打印旋转时保持文本高精度矢量输出,打印更清晰. watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQva29uZ195ZWU=/font/5a6 ...