html 表格折叠效果,JQuery实现table行折叠效果以JSON做数据源

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;

}

课程名称

初考时间

初考成绩

次考时间

次考成绩

清考时间

清考成绩

备注