首页
所有分类
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 相关文章推荐
javascript两段代码,两个小技巧
Feb 04 Javascript
js实现仿QQ秀换装效果的方法
Mar 04 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
利用JavaScript实现拖拽改变元素大小
Dec 14 Javascript
[js高手之路]单例模式实现模态框的示例
Sep 01 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
vue子路由跳转实现tab选项卡
Jul 24 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
jquery实现轮播图特效
Apr 12 jQuery
解决vue刷新页面以后丢失store的数据问题
Aug 11 Javascript
微信小程序canvas动态时钟
Oct 22 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
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
Eclipse(1) pdf(1) 延时任务(1) openGauss(1) 日志(1) 二维码(2) 太阳码(1) Word(2) JDBC(3) 条码(1)
You might like
PHP 分页原理分析，大家可以看看
2009/12/21 PHP
Window下PHP三种运行方式图文详解
2013/06/11 PHP
PHP实现一个轻量级容器的方法
2019/01/28 PHP
用htc组件制作windows选项卡
2007/01/13 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
cookie的复制与使用记住用户名实现代码
2013/11/04 Javascript
Jquery插件easyUi表单验证提交(示例代码)
2013/12/30 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
javascript中mouseover、mouseout使用详解
2015/07/19 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
Three.js入门之hello world以及如何绘制线
2017/09/25 Javascript
ionic3+Angular4实现接口请求及本地json文件读取示例
2017/10/11 Javascript
webpack+vue-cli项目中引入外部非模块格式js的方法
2018/09/28 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
Vue.js自定义指令学习使用详解
2019/10/19 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
Jquery高级应用Deferred对象原理及使用实例
2020/05/28 jQuery
基于javascript canvas实现五子棋游戏
2020/07/08 Javascript
Python中实现对list做减法操作介绍
2015/01/09 Python
python类中super()和__init__()的区别
2016/10/18 Python
Python编程实现二叉树及七种遍历方法详解
2017/06/02 Python
CentOS 6.5中安装Python 3.6.2的方法步骤
2017/12/03 Python
python3爬虫中多线程进行解锁操作实例
2020/11/25 Python
一些网络技术方面的面试题
2014/05/01 面试题
考试没考好检讨书
2014/01/31 职场文书
班级旅游计划书
2014/05/03 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
商铺门前三包责任书
2014/07/25 职场文书
如何写早恋检讨书
2014/09/10 职场文书
升学宴学生答谢词
2015/01/05 职场文书
2015年“我们的节日·中秋节”活动总结
2015/07/30 职场文书
2015年成本会计工作总结
2015/10/14 职场文书
2016年社区创先争优活动总结
2016/04/05 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书