这篇文章主要介绍JQuery实现的table行折叠效果并以JSON做数据源,需要的朋友可以参考下
 
<!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>
最新资讯
“贪心”应用花式偷手机隐私,背后无非是个利字

“贪心”应用花式偷手

这些应用的研发、运营机构对我们手机上关键部位和信息
刷短视频玩小游戏,哪个才是代表未来的正经事?

刷短视频玩小游戏,哪个

互联网中两个被越隔越远的世界,一个世界里的人喜欢用尽
轻应用开发的"下半场",会是一场鸡肋反击战吗?

轻应用开发的"下半场

轻应用虽然起步很早,但其他产品模式没有给它留下生存空
从2.5亿美元到479亿美元,小米的增长黑客逻辑是什么

从2.5亿美元到479亿美

小米增长等式:参与度 ×迭代速度 ×转化率 × 复购率
冯鑫内部两小时长谈:复盘暴风上市三年最大失误

冯鑫内部两小时长谈:复

冯鑫复盘暴风上市三年最大失误。
世界杯快结束了,VAR的故事才刚刚开始

世界杯快结束了,VAR的

眼看世界杯只剩下不到十场比赛,VAR的争议却似乎刚刚开
最新文章
Angular2进阶之如何避免Dom误区

Angular2进阶之如何避

这篇文章主要介绍了Angular2进阶之如何避免Dom误区,小
使用FileReader API创建Vue文件阅读器组件

使用FileReader API创

这篇文章主要介绍了使用FileReader API创建一个Vue的
react 实现页面代码分割、按需加载的方法

react 实现页面代码分

本篇文章主要介绍了react 实现页面代码分割、按需加载
Vue项目分环境打包的实现步骤

Vue项目分环境打包的

这篇文章主要介绍了Vue项目如何分环境打包,实现方法大
vue 组件中slot插口的具体用法

vue 组件中slot插口的

这篇文章主要介绍了vue 中slot 的具体用法,包括子组件
JS遍历DOM文档树的方法实例详解

JS遍历DOM文档树的方

这篇文章主要介绍了JS遍历DOM文档树的方法,结合实例形