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

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 += "[-]" + sys[j] + "";
for (var i = 0; i < json.length; i++) {
if (json[i].SysName == sys[j]) {
tr += "" + json[i].CourseName + "" + setDate(json[i].firstdate) + "" + setSelect(json[i].firstresult) + "" + setDate(json[i].secdate) + "" + setSelect(json[i].secresult) + "" + setDate(json[i].thirddate) + "" + setSelect(json[i].thirdresult) + "" + setInput(json[i].Remarks) + ""
}
}
}
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 "" + obj + "合格不合格";
}
function setDate(obj) {
return "";
}
function setInput(obj) {
return "";
}
function setDataXML() {
var dataxml = $("");
$("tr[parent^=p]").each(function () {
var item = $("");
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;
}