JQuery实现table行折叠效果以JSON做数据源
代码如下:
<!doctype html>
<html xmlns="https://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="https://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">
<p>
<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>
</p>
<input id="btnsave" type="button" value="保存" />
<textarea id="ta" cols="100" rows="20" ></textarea>
</form>
</body>
</html>