首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

JQuery实现table行折叠效果以JSON做数据源

Posted in Javascript onMay 26, 2014 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title></title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
<script type="text/javascript"> 
Array.prototype.filterRepeat = function () { 
var res = [], hash = {}; 
for (var i = 0, elem; (elem = this[i]) != null; i++) { 
if (!hash[elem]) { 
res.push(elem); 
hash[elem] = true; 
} 
} 
return res; 
} 
$(function () { 
var json = [ 
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "SQL", "CourseGuid": "22", "Remarks": "大sb", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "MySQL", "CourseGuid": "23", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "NoSQL", "CourseGuid": "24", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "数据库", "SysGuid": "1", "CourseName": "Oracle", "CourseGuid": "25", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "基础", "CourseGuid": "43", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, 
{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "高级", "CourseGuid": "44", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-4-1", "thirdresult": "合格" }, 
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "基础", "CourseGuid": "54", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-5-1", "thirdresult": "合格" }, 
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "高级", "CourseGuid": "67", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-6-1", "thirdresult": "合格" }, 
]; 
createTable(json); 
$("#btnsave").click(function () { 
$("#ta").text(setDataXML()); 
}); 
}); 
function createTable(json) { 
var tb = $("#tb"); 
var sys = new Array; 
for (var i = 0; i < json.length; i++) { 
sys.push(json[i].SysName); 
} 
//过滤重复 
sys = sys.filterRepeat(); 
var tr = null; 
for (var j = 0 ; j < sys.length; j++) { 
tr += "<tr style='text-align: left' class=gridborder id=p" + j + "><td colspan=8>[-]" + sys[j] + "</td></tr>"; 
for (var i = 0; i < json.length; i++) { 
if (json[i].SysName == sys[j]) { 
tr += "<tr parent=p" + j + " style='text-align: center' pguid='" + json[i].SysGuid + "' cguid='" + json[i].CourseGuid + "'><td>" + json[i].CourseName + "</td><td>" + setDate(json[i].firstdate) + "</td><td>" + setSelect(json[i].firstresult) + "</td><td>" + setDate(json[i].secdate) + "</td><td>" + setSelect(json[i].secresult) + "</td><td>" + setDate(json[i].thirddate) + "</td><td>" + setSelect(json[i].thirdresult) + "</td><td>" + setInput(json[i].Remarks) + "</td></tr>" 
} 
} 
} 
tb.append(tr); 
//设置行点击事件 
$("tr.gridborder").css("cursor", "pointer") 
.toggle(function () { 
var txt = $(this).children().text(); 
$(this).children().text(txt.replace("-", "+")); 
}, function () { 
var txt = $(this).children().text(); 
$(this).children().text(txt.replace("+", "-")); 
}).click(function () { 
var id = $(this).attr("id"); 
$(this).siblings("tr[parent='" + id + "']").toggle(); 
}); 
//设置选中变色 
$("tr[parent^=p]").toggle(function () { 
$(this).attr('bgcolor', '#E3e4e5'); 
}, function () { 
$(this).attr('bgcolor', '#ffffff'); 
}); 
} 
function setSelect(obj) { 
return "<select style='width:96%'><option value ='" + obj + "'>" + obj + "</option ><option value='合格'>合格</option><option value='不合格'>不合格</option></select>"; 
} 
function setDate(obj) { 
return "<input style='width:96%' type='text' value='" + obj + "' />"; 
} 
function setInput(obj) { 
return "<input style='width:96%' type='text' value='" + obj + "' />"; 
} 
function setDataXML() { 
var dataxml = $("<DataXML></DataXML>"); 
$("tr[parent^=p]").each(function () { 
var item = $("<Course/>"); 
var sysguid = $(this).attr("pguid"); 
var cguid = $(this).attr("cguid"); 
var fdate = $(this).children().children().eq(0).val(); 
var fresult = $(this).children().children().eq(1).val(); 
var sdate = $(this).children().children().eq(2).val(); 
var sresult = $(this).children().children().eq(3).val(); 
var tdate = $(this).children().children().eq(4).val(); 
var tresult = $(this).children().children().eq(5).val(); 
var remark = $(this).children().children().eq(6).val(); 
item.attr("SysGuid", sysguid).attr("Remarks", remark).attr("CourseGUID", cguid) 
.attr("FirstDate", fdate).attr("FirstResult", fresult) 
.attr("SecDate", sdate).attr("SecResult", sresult) 
.attr("ThirdDate", tdate).attr("ThirdResult", tresult); 
dataxml.append(item); 
}); 
return dataxml[0].outerHTML; 
} 
</script> 
</head> 
<body> 
<form id="form1" runat="server"> 
<div> 
<table id="tb" border="1" style="border-collapse: collapse" width="100%"> 
<tbody> 
<tr style="text-align: center"> 
<td style="width: 100px">课程名称</td> 
<td style="width: 120px">初考时间</td> 
<td style="width: 120px">初考成绩</td> 
<td style="width: 120px">次考时间</td> 
<td style="width: 120px">次考成绩</td> 
<td style="width: 120px">清考时间</td> 
<td style="width: 120px">清考成绩</td> 
<td style="width: 250px">备注</td> 
</tr> 
</tbody> 
</table> 
</div> 
<input id="btnsave" type="button" value="保存" /> 
<textarea id="ta" cols="100" rows="20" ></textarea> 
</form> 
</body> 
</html>

JQuery实现table行折叠效果以JSON做数据源

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery之empty()与remove()区别说明
Sep 10 Javascript
为超链接加上disabled后的故事
Dec 10 Javascript
JavaScript实现cookie的写入、读取、删除功能
Nov 05 Javascript
jQuery中ajax的load()与post()方法实例详解
Jan 05 Javascript
JavaScript中两个字符串的匹配
Jun 08 Javascript
对Vue table 动态表格td可编辑的方法详解
Aug 28 Javascript
vue项目刷新当前页面的三种方法
Dec 04 Javascript
使用 node.js 模仿 Apache 小部分功能
Jul 07 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Vue 实现显示/隐藏层的思路（加全局点击事件）
Dec 31 Javascript
Vue 打包体积优化方案小结
May 20 Javascript
微信小程序实现打卡签到页面
Sep 21 Javascript
jquery attr方法获取input的checked属性问题
May 26 #Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 #Javascript
jQuery实现鼠标可拖动调整表格列宽度
May 26 #Javascript
js处理表格对table进行修饰
May 26 #Javascript
利用jQuery实现可以编辑的表格
May 26 #Javascript
js实现简单的购物车有图有代码
May 26 #Javascript
js函数参数设置默认值的一种变通实现方法
May 26 #Javascript
SingleFlight(2) Mybatis-Plus(3) set(1) TableField(1) 字典(3) frozenset(1) Next.js(1) 脚手架(2) el-table(1) 并发(8)
You might like
PHP读取ACCESS数据到MYSQL的代码
2011/05/11 PHP
php-fpm配置详解
2014/02/12 PHP
php查询相似度最高的字符串的方法
2015/03/12 PHP
PHP-FPM之Chroot执行环境详解
2015/08/03 PHP
php上传图片类及用法示例
2016/05/11 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
javascript document.execCommand() 常用解析
2009/12/14 Javascript
javascript Onunload与Onbeforeunload使用小结
2009/12/31 Javascript
jQuery each()小议
2010/03/18 Javascript
基于jquery的固定表头和列头的代码
2012/05/03 Javascript
js设置function参数默认值(适合没有传参情况)
2014/02/24 Javascript
jquery获取radio值实例
2014/10/16 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
jQuery实现平滑滚动页面到指定锚点链接的方法
2015/07/15 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
canvas实现粒子时钟效果
2017/02/06 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
使用javaScript实现鼠标拖拽事件
2020/04/03 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
vue组件之间通信实例总结(点赞功能)
2018/12/05 Javascript
nodejs对项目下所有空文件夹创建gitkeep的方法
2019/08/02 NodeJs
Python返回真假值（True or False）小技巧
2015/04/10 Python
Python如何快速实现分布式任务
2017/07/06 Python
python模块之time模块(实例讲解)
2017/09/13 Python
python将控制台输出保存至文件的方法
2019/01/07 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Python基于OpenCV实现人脸检测并保存
2019/07/23 Python
Python使用matplotlib 模块scatter方法画散点图示例
2019/09/27 Python
python实现图片横向和纵向拼接
2020/03/05 Python
GWT （Google Web Toolkit）有哪些主要的原件组成？
2015/06/08 面试题
国贸专业个人求职信分享
2013/12/04 职场文书
校园自助餐厅的创业计划书
2013/12/26 职场文书
公益广告语集锦
2014/03/13 职场文书
地震捐款倡议书
2014/08/29 职场文书
2014年园林绿化工作总结
2014/12/11 职场文书
pandas数值排序的实现实例
2021/07/25 Python