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>& ...
随机推荐
- SQL Server使用LIKE运算符进行匹配查询
在查询的过程中,如果遇到不能明确的指明查询的限定条件时,就会用到LIKE运算符进行模式匹配查询.在查询时可以使用如下几个通配符: %:包含零个或多个字符的任意字符串 —(下划线):任何单个字符 []: ...
- 使用Maven完成自动化打包并部署到Linux服务器下（Tomcat7）
最近在使用maven,顺便尝试了下tomcat部署.网上找到了很多资料但是都不是最新的,所以贴上比较新的Tomcat7部署代码和配置,方便以后回顾-->测试OK. 1. 首先是配置Tomcat ...
- django1.4.5无法安装MySQLdb1.2.3
解决办法是: yum install python-devel mysql-devel zlib-devel openssl-devel 然后再build.install
- javascript函数querySelector
querySelector用于获得dom节点,可以接受三种类型的参数:id(#),class(.),标签.很像jquery的选择器.不过只能返回一个子孙元素,但是jquery选择器的话,可以返回一组元 ...
- Python之登陆接口设计
刚刚开始学习Python,第一个编写的程序. import os user_file = open('use_file.txt', 'r') user_list = user_file.readlin ...
- Move WriteBuffer ReadBuffer String
在实际编程中,经常会用到Buffer,当string作为Buffer传值时需要注意的是 1, string的值的起始索引是1,千万记住! 2, 有时候需要先告诉系统去开辟出内存空间,用SetLengt ...
- 宣布发布 Windows Azure 导入/导出服务的预览版以及 Web 和移动解决方案场景的若干增强功能
客户评估基于云的存储解决方案时,面临的挑战之一是以经济高效.安全快速的方式从 Blob 存储区移进和移出大量数据.今天,我们很高兴地宣布发布 Windows Azure 导入/导出的预览版,这款新服务 ...
- Java控制台输入ScannerDemo
- 详解iOS开发之自定义View
iOS开发之自定义View是本文要将介绍的内容,iOS SDK中的View是UIView,我们可以很方便的自定义一个View.创建一个 Window-based Application程序,在其中添加 ...
- JavaSript模块化 && AMD CMD 详解.....
模块化是指在解决某一个复杂问题或者一系列的杂糅问题时,依照一种分类的思维把问题进行系统性的分解以之处理.模块化是一种处理复杂系统分解为代码结构更合理,可维护性更高的可管理的模块的方式.可以想象一个巨大 ...