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); }
雜湊[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", "Remarks": "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", "備註": "智商太低", " 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", "備註": "智商太低", "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].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). );
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 備註= $( this) .children().children().eq(6).val()
item.attr("SysGuid", sysguid).attr("備註", 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)
});
返回dataxml[0].outerHTML;
}

腳本>
頭>

;


;




;

;

;




表>




表格>

課程名稱

初考時間

初考成績

次考時間

次考成績

清考時間

清考成績

備註