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>& ...
随机推荐
- XGPush集成（信鸽集成）demo
#import "AppDelegate.h" #import "XGPush.h" #import "XGSetting.h" #defi ...
- iOS 7 标签栏控制器进行模态视图跳转后变成透明
要解决此问题,需要设置tabBar的如下属性: self.tabBar.translucent = NO;
- 解决 Tomcat reload WARNING [localhost-startStop-2] org.apache.catalina.loader.WebappClassLoaderBase.clearReferencesJdbc The web application [] registered the JDBC driver [com.mysql.jdbc.Driver] but fail
转自:http://www.cnblogs.com/interdrp/p/5632529.html 我的错误如下: 06-Sep-2016 18:57:10.595 WARNING [localhos ...
- C程序的存储空间布局
历史沿袭至今,C程序一直由下列几部分组成: 1. 正文段.这是由CPU执行的机器指令部分.通常,正文段是可共享的,所以即使是频繁执行的程序(编辑器,编译器,命令解释器)在存储器中也只需一个副本,另外正 ...
- POJ 3461 Oulipo（模式串在主串中出现的次数）
题目链接:http://poj.org/problem?id=3461 题意:给你两个字符串word和text,求出word在text中出现的次数 思路:kmp算法的简单应用,遍历一遍text字符串即 ...
- Java ByteArrayOutputStream中buf 的大小增长问题
问题:写入固定长度的字符串[write(byte b[])],观察ByteArrayOutputStream中buf 的大小始终比字符串 Bytes的Size大很多,很是不解 分析发现: privat ...
- 手机浏览器下IScroll中click事件
产品的h5页面几乎都使用了iscroll插件,如果a标签在iscroll里,在部分手机浏览器中会出现无法点击的情况,不管是绑定click事件还是使用a标签的href属性.href属性偶尔还会能点击,c ...
- Spring Boot简介
Spring Boot简介 Spring Boot是为了简化Spring开发而生,从Spring 3.x开始,Spring社区的发展方向就是弱化xml配置文件而加大注解的戏份.最近召开的SpringO ...
- 【Untiy3D 游戏开发之一】Unity3D For Window/Mac最新4.2.0版本破解教程
转载请标明:转载自[小枫栏目],博文链接:http://blog.csdn.net/rexuefengye/article/details/11646885 一.Unity3D For Mac 1.首 ...
- 脑波设备mindwave介绍
脑波,又称之为脑电波,是人大脑发出的电波,非常的微弱,只能通过设备来检测. 人的脑波在不同状态下,会不同,因此可以通过脑波来量化分析人的精神状态. 科学家讲脑电波分为四种,以下为详细解释(摘自百度百科 ...