<div class="codetitle"> <span><a style="CURSOR: pointer" data="38770" class="copybut" id="copybut38770" onclick="doCopy('code38770')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다.</div> <div class="codebody" id="code38770"> <br><!DOCTYPE html> <br><br><html xmlns="http://www.w3.org/1999/xhtml"> <br><head runat="server"> <br><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <br><제목></제목> <br><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <br><script type="text/javascript"> <br>Array.prototype.filterRepeat = function () { <br>var res = [], hash = {}; <br>for (var i = 0, elem; (elem = this[i]) != null; i ) { <br>if (!hash[elem]) { <br>res.push(elem); <br>해시[elem] = 참; <br>} <br>} <br>return res; <br>} <br>$(function () { <br>var json = [ <br>{ "SysName": "数据库", "SysGuid": "1", "CourseName": "SQL", "CourseGuid ": "22", "비고": "大sb", "firstdate": "2013-1-1", "firstresult": "합格", "secdate": "2013-2-1", "secresult" : "합格", "thirddate": "2013-3-1", "thirdresult": "합格" }, <br>{ "SysName": "数据库", "SysGuid": "1", "CourseName": "MySQL", "CourseGuid": "23", "Remarks": "IQ大低", "firstdate": "2013-1-1", "firstresult": "불합치", "secdate": "2013- 2-1", "secresult": "불합格", "thirddate": "2013-3-1", "thirdresult": "합格" }, <br>{ "SysName": "数据库", "SysGuid" : "1", "CourseName": "NoSQL", "CourseGuid": "24", "Remarks": "IQ大低", "firstdate": "2013-1-1", "firstresult": "不합格", "secdate": "2013-2-1", "secresult": "합당", "thirddate": "2013-3-1", "thirdresult": "합格" }, <br>{ "SysName" : "数据库", "SysGuid": "1", "CourseName": "Oracle", "CourseGuid": "25", "Remarks": "IQ大低", "firstdate": "2013-1-1" , "firstresult": "불합치", "secdate": "2013-2-1", "secresult": "합당", "thirddate": "2013-3-1", "thirdresult": "합합" } , <br>{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "基础", "CourseGuid": "43", "Remarks": "IQtai低", " firstdate": "2013-1-1", "firstresult": "합당", "secdate": "2013-2-1", "secresult": "불합치", "thirddate": "2013-3-1 ", "thirdresult": "합" }, <br>{ "SysName": "ASP.NET", "SysGuid": "2", "CourseName": "高级", "CourseGuid": "44", " 비고": "IQ大低", "firstdate": "2013-1-1", "firstresult": "합格", "secdate": "2013-2-1", "secresult": "不합格", "thirddate": "2013-4-1", "thirdresult": "합格" }, <br>{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "基础", " CourseGuid": "54", "Remarks": "IQ大低", "firstdate": "2013-1-1", "firstresult": "합格", "secdate": "2013-2-1", " secresult": "합정", "thirddate": "2013-5-1", "thirdresult": "합합" }, <br>{ "SysName": "JavaScript", "SysGuid": "3", "CourseName ": "高级", "CourseGuid": "67", "Remarks": "IQ大低", "firstdate": "2013-1-1", "firstresult": "불합치", "secdate": " 2013-2-1", "secresult": "합格", "thirddate": "2013-6-1", "thirdresult": "합格" }, <br>]; <br>createTable(json); <br><br>$("#btnsave").click(function () { <br>$("#ta").text(setDataXML()); <br>}); <br>}); <br>function createTable(json) { <br>var tb = $("#tb"); <br>var sys = 새 어레이; <br>for (var i = 0; i < json.length; i ) { <BR>sys.push(json[i].SysName); <BR>} <BR>//过滤중복 <BR>sys = sys.filterRepeat(); <BR>var tr = null; <BR>for (var j = 0 ; j < sys.length; j ) { <BR>tr = "<tr style='text-align: left' class=gridborder id=p" j ">< ;td colspan=8>[-]" sys[j] "</td></tr>"; <br>for (var i = 0; i < json.length; i ) { <BR>if (json[i].SysName == sys[j]) { <BR>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>" <br>} <br>} <br>} <br>tb.append(tr); <br>//设置行点击事件 <br>$("tr.gridborder").css("cursor", "pointer") <br>.toggle(function () { <br>var txt = $(this ).children().text(); <br>$(this).children().text(txt.replace("-", " ")), function () { <br>var txt = $(this).children().text(); <br>$(this).children().text(txt.replace(" ", "-")) <br><br>}) .click(function () { <br>var id = $(this).attr("id"); <br>$(this).siblings("tr[parent='" id "']").toggle () <br>}); <br>//设置选中变color <br>$("tr[parent^=p]").toggle(function () { <br>$(this).attr('bgcolor', '#E3e4e5'); <br>}, function () { <br>$(this).attr('bgcolor', '#ffffff') <br>}); <br>}<br>function setSelect(obj) { <br>return "<select style='width:96%'><option value ='" obj "'>" obj "</옵션><옵션 값='합치'>합합</옵션><옵션 값='불합格'>불합格</옵션></select>"; <br>} <br>function setDate(obj) { <br>return "<input style='width:96%' type='text' value='" obj "' />"; <br>} <br>function setInput(obj) { <br>return "<input style='width:96%' type='text' value='" obj "' />"; <br>} <br>function setDataXML() { <br>var dataxml = $("<DataXML></DataXML>"); <br>$("tr[parent^=p]").each(function () { <br>var item = $("<Course/>"); <br>var sysguid = $(this) .attr("pguid"); <br>var cguid = $(this).attr("cguid") <br>var fdate = $(this).children().children().eq(0). val(); <br>var fresult = $(this).children().children().eq(1).val() <br>var sdate = $(this).children().children() .eq(2).val(); <br>var sresult = $(this).children().children().eq(3).val() <br>var tdate = $(this).children ().children().eq(4).val(); <br>var tresult = $(this).children().children().eq(5).val() <br>var comment = $(this).children().children().eq(6).val(); <br>item.attr("SysGuid", sysguid).attr("설명", 댓글).attr("CourseGUID" , cguid) <br>.attr("FirstDate", fdate).attr("FirstResult", fresult) <br>.attr("SecDate", sdate).attr("SecResult", sresult) <br>.attr ("세 번째 날짜", tdate).attr("세 번째 결과", tresult) <br>dataxml.append(item) <br>}); <br>return dataxml[0].outerHTML; <br>} <br><br></script> <br></head> <br><본문> <br><form id="form1" runat="server"> <br><div> <br><br><table id="tb" border="1" style="border-collapse:collapse" width="100%"> <br><tbody> <br><tr style="text-align: center"> <br><td style="width: 100px">课程name称</td> <br><br><td style="width: 120px">初考时间</td> <br><td style="width: 120px">初考成绩</td> <br><td style="width: 120px">次考时间</td> <br><td style="width: 120px">次考成绩</td> <br><td style="width: 120px">清考时间</td> <br><td style="width: 120px">清考成绩</td> <br><td style="width: 250px">备注</td> <br></tr> <br><br></tbody> <br></테이블> <br></div> <br><input id="btnsave" type="button" value="保存" /> <br><textarea id="ta" cols="100"rows="20" ></textarea> <br><br></form> <br><br></body> <br></html> <br> </div>