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>
Javascript 相关文章推荐
IE6 弹出Iframe层中的文本框“经常”无法获得输入焦点
Dec 27 Javascript
Bootstrap学习笔记之js组件(4)
Jun 12 Javascript
js实现本地时间同步功能
Aug 26 Javascript
JavaScript中运算符规则和隐式类型转换示例详解
Sep 06 Javascript
JavaScript的setter与getter方法
Nov 29 Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 jQuery
jQuery基于闭包实现的显示与隐藏div功能示例
Jun 09 jQuery
vue.js通过路由实现经典的三栏布局实例代码
Jul 08 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
javascript设计模式之装饰者模式
Jan 30 Javascript
npx create-react-app xxx创建项目报错的解决办法
Feb 17 Javascript
vue3+typescript实现图片懒加载插件
Oct 26 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
You might like
PHP+MySQL5.0中文乱码解决方法
2006/11/20 PHP
PHP中的日期时间处理利器实例(Carbon)
2017/06/09 PHP
JavaScript 编程引入命名空间的方法
2007/06/29 Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
js前台分页显示后端JAVA数据响应
2013/03/18 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
jquery中插件实现自动添加用户的具体代码
2013/11/15 Javascript
javascript的解析执行顺序在各个浏览器中的不同
2014/03/17 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
2015/02/13 Javascript
基于JS实现的倒计时程序实例
2015/07/24 Javascript
在JavaScript中call()与apply()区别
2016/01/22 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
jQuery插件Echarts实现的渐变色柱状图
2017/03/23 jQuery
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
ant design实现圈选功能
2019/12/17 Javascript
Vue实现可移动水平时间轴
2020/06/29 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
[49:28]VP vs Optic 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简单谈谈python中的多进程
2016/11/06 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
Python3实现的反转单链表算法示例
2019/03/08 Python
python爬虫之自制英汉字典
2019/06/24 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
mac系统下Redis安装和使用步骤详解
2019/07/09 Python
Python日志无延迟实时写入的示例
2019/07/11 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
pandas数据分组groupby()和统计函数agg()的使用
2021/03/04 Python
css3动画效果抖动解决方法
2018/09/03 HTML / CSS
html5 input元素新特性_动力节点Java学院整理
2017/07/06 HTML / CSS
HTML5的革新 结构之美
2011/06/20 HTML / CSS
Tenstickers法国:墙贴和装饰贴纸
2019/08/26 全球购物
Java Servlet API中forward() 与redirect()的区别
2014/04/20 面试题
中专生求职自荐信范文
2013/12/22 职场文书
公司联欢晚会主持词
2014/03/22 职场文书
Mysql关于数据库是否应该使用外键约束详解说明
2021/10/24 MySQL