JQuery は、JSON をデータとして使用してテーブル行折りたたみ効果を実装します。

コードをコピー コードは次のとおりです: Array.prototype.filterRepeat = function () { var res = [], hash = {}; for (var i = 0, elem; (elem = this[i]) != null; i ) { if (!hash[elem]) { res.push(elem); ハッシュ[elem] = true; } } 応答を返します。 } $(function () { var json = [ { "SysName": "数据库", "SysGuid": "1", "CourseName": "SQL", "CourseGuid" ": "22"、"備考": "大sb"、"firstdate": "2013-1-1"、"firstresult": "合格"、"secdate": "2013-2-1"、"secresult" : "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, { "SysName": "数据库", "SysGuid": "1", "CourseName": "MySQL"、"CourseGuid": "23"、"備考": "IQ太低"、"firstdate": "2013-1-1"、"firstresult": "不合格"、"secdate": "2013- 2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, { "SysName": "数据库", "SysGuid" : "1"、"CourseName": "NoSQL"、"CourseGuid": "24"、"備考": "IQ太低"、"firstdate": "2013-1-1"、"firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" }, { "SysName" : "数据库"、"SysGuid": "1"、"CourseName": "Oracle"、"CourseGuid": "25"、"備考": "IQ太低"、"firstdate": "2013-1-1" , "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" } , { "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "基础", "CourseGuid": "43", "備考": "IQ太低", " firstdate": "2013-1-1"、"firstresult": "合格"、"secdate": "2013-2-1"、"secresult": "不合格"、"thirddate": "2013-3-1 ", "thirdresult": "合格" }, { "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "高级", "CourseGuid": "44", "備考": "IQ太低"、"firstdate": "2013-1-1"、"firstresult": "合格"、"secdate": "2013-2-1"、"secresult": "不合格"、 "threedate": "2013-4-1", "thirdresult": "合格" }, { "SysName": "JavaScript", "SysGuid": "3", "CourseName": "基础", " CourseGuid": "54"、"備考": "IQ太低"、"firstdate": "2013-1-1"、"firstresult": "合格"、"secdate": "2013-2-1"、" secresult": "合格", "thirddate": "2013-5-1", "thirdresult": "合格" }, { "SysName": "JavaScript", "SysGuid": "3", "CourseName ": "高级", "CourseGuid": "67", "備考": "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 = 新しい配列; for (var i = 0; i sys.push(json[i].SysName); } //过滤重复 sys = sys.filterRepeat(); var tr = null; for (var j = 0 ; j tr = " [-]" sys[j] " "; for (var i = 0; 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].備考) " " } } } 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(); $(this).children().children().eq(6).val(); item.attr("SysGuid", sysguid).attr("備考", コメント).attr("コースGUID" , 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; } 课程名 初検討時間 初考成绩 次検討時間 次検討成绩 清検討時間 清考成绩 备注

JQuery は、JSON をデータとして使用してテーブル行折りたたみ効果を実装します。

関連記事