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 月初和月末
--月初 select convert(varchar(10),dateadd(day,-(day(getdate()) -1),getdate()) ,120) --月末select conve ...
- 删除Lb重复的数,用La输出（顺序表）
#include<stdio.h> typedef int A; const int LIST_INIT_SIZE=100; const int LISTINCRMENT=10; type ...
- BZOJ 1044: [HAOI2008]木棍分割(二分答案 + dp)
第一问可以二分答案,然后贪心来判断. 第二问dp, dp[i][j] = sigma(dp[k][j - 1]) (1 <= k <i, sum[i] - sum[k] <= ans ...
- SAE上使用本地sql文件建表时出错解决方法
在SAE上部署网站时需要上传本地的数据库结构,我也导出了本地数据库为sql文件,但是上传到SAE上时遇到了如下错误: MySQL 返回: #1044 - Access denied for user ...
- ssh远程登录linux服务器
ssh远程登录linux服务器 用法: ssh -l user -p port server_ip 或者 ssh -p port user@server_ip 参数: -l 后接要登录的远程系统用户名 ...
- 射频识别技术漫谈(14)——Mifare S50与S70的存取控制
存取控制指符合什么条件才能对卡片进行操作. S50和S70的块分为数据块和控制块,对数据块的操作有“读”.“写”.“加值”.“减值(含传输和存储)”四种,对控制块的操作只有“读”和“写”两种. S50 ...
- Ubuntu离线安装软件包
一.应用场景 a.当我们需要在多台电脑安装同一个软件,并且这个软件很大,下载需要很长时间时 b.需要安装软件的ubuntu不能上网 二.离线安装包的制作 2.1.通过如下指令下载XXXX软件所需要的d ...
- [转载]cin、cin.get()、cin.getline()、getline()、gets()函数的用法
1.cin>> 用法1:最基本,也是最常用的用法,输入一个数字: #include <iostream>using namespace std;main ( ...
- hdoj 1247 Hat’s Words(字典树)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1247 思路分析:题目要求找出在输入字符串中的满足要求(该字符串由输入的字符串中的两个字符串拼接而成)的 ...
- Tree（未解决。。。）
Tree Time Limit: 10000/5000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...