JQuery實(shí)現(xiàn)table行折疊效果以JSON做數(shù)據(jù)源
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script type="text/javascript">
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": "數(shù)據(jù)庫(kù)", "SysGuid": "1", "CourseName": "SQL", "CourseGuid": "22", "Remarks": "1", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "數(shù)據(jù)庫(kù)", "SysGuid": "1", "CourseName": "MySQL", "CourseGuid": "23", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "數(shù)據(jù)庫(kù)", "SysGuid": "1", "CourseName": "NoSQL", "CourseGuid": "24", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "不合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-3-1", "thirdresult": "合格" },
{ "SysName": "數(shù)據(jù)庫(kù)", "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": "基礎(chǔ)", "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": "高級(jí)", "CourseGuid": "44", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "不合格", "thirddate": "2013-4-1", "thirdresult": "合格" },
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "基礎(chǔ)", "CourseGuid": "54", "Remarks": "IQ太低", "firstdate": "2013-1-1", "firstresult": "合格", "secdate": "2013-2-1", "secresult": "合格", "thirddate": "2013-5-1", "thirdresult": "合格" },
{ "SysName": "JavaScript", "SysGuid": "3", "CourseName": "高級(jí)", "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);
}
//過(guò)濾重復(fù)
sys = sys.filterRepeat();
var tr = null;
for (var j = 0 ; j < sys.length; j++) {
tr += "<tr style='text-align: left' class=gridborder id=p" + j + "><td colspan=8>[-]" + sys[j] + "</td></tr>";
for (var i = 0; i < json.length; i++) {
if (json[i].SysName == sys[j]) {
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>"
}
}
}
tb.append(tr);
//設(shè)置行點(diǎn)擊事件
$("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();
});
//設(shè)置選中變色
$("tr[parent^=p]").toggle(function () {
$(this).attr('bgcolor', '#E3e4e5');
}, function () {
$(this).attr('bgcolor', '#ffffff');
});
}
function setSelect(obj) {
return "<select style='width:96%'><option value ='" + obj + "'>" + obj + "</option ><option value='合格'>合格</option><option value='不合格'>不合格</option></select>";
}
function setDate(obj) {
return "<input style='width:96%' type='text' value='" + obj + "' />";
}
function setInput(obj) {
return "<input style='width:96%' type='text' value='" + obj + "' />";
}
function setDataXML() {
var dataxml = $("<DataXML></DataXML>");
$("tr[parent^=p]").each(function () {
var item = $("<Course/>");
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;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table id="tb" border="1" style="border-collapse: collapse" width="100%">
<tbody>
<tr style="text-align: center">
<td style="width: 100px">課程名稱</td>
<td style="width: 120px">初考時(shí)間</td>
<td style="width: 120px">初考成績(jī)</td>
<td style="width: 120px">次考時(shí)間</td>
<td style="width: 120px">次考成績(jī)</td>
<td style="width: 120px">清考時(shí)間</td>
<td style="width: 120px">清考成績(jī)</td>
<td style="width: 250px">備注</td>
</tr>
</tbody>
</table>
</div>
<input id="btnsave" type="button" value="保存" />
<textarea id="ta" cols="100" rows="20" ></textarea>
</form>
</body>
</html>
- 通過(guò)Jquery的Ajax方法讀取將table轉(zhuǎn)換為Json
- jQuery+json實(shí)現(xiàn)動(dòng)態(tài)創(chuàng)建復(fù)雜表格table的方法
- jQuery通過(guò)ajax請(qǐng)求php遍歷json數(shù)組到table中的代碼(推薦)
- js實(shí)現(xiàn)將json數(shù)組顯示前臺(tái)table中
- js中將字符串轉(zhuǎn)換成json的三種方式
- 解析JSON對(duì)象與字符串之間的相互轉(zhuǎn)換
- JS對(duì)象與JSON格式數(shù)據(jù)相互轉(zhuǎn)換
- JQuery遍歷json數(shù)組的3種方法
- 使用jsonp完美解決跨域問(wèn)題
- jQuery中讀取json文件示例代碼
- js與jQuery實(shí)現(xiàn)獲取table中的數(shù)據(jù)并拼成json字符串操作示例
相關(guān)文章
jQuery 選擇器用法實(shí)例分析【prev + next】
這篇文章主要介紹了jQuery 選擇器用法,結(jié)合實(shí)例形式分析了jQuery選擇器prev 與 next基本功能、用法及相關(guān)注意事項(xiàng),需要的朋友可以參考下2020-05-05jQuery實(shí)現(xiàn)移動(dòng)端Tab選項(xiàng)卡效果
本篇文章主要介紹了jQuery實(shí)現(xiàn)移動(dòng)端Tab選項(xiàng)卡效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03jQuery動(dòng)態(tài)添加的元素綁定事件處理函數(shù)代碼
有一段時(shí)間沒(méi)用jquery了,今天又碰到這個(gè)問(wèn)題。當(dāng)時(shí)是知道有l(wèi)ivejquery可以解決。但是我并不喜歡為了這個(gè)而另外加載一個(gè)。2011-08-08jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋
一個(gè)輕量級(jí)的cookie 插件,可以讀取、寫(xiě)入、刪除 cookie。這篇文章主要介紹了jQuery.cookie.js使用方法及相關(guān)參數(shù)解釋,需要的朋友可以參考下2017-03-03jquery實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能【適合新手】
這篇文章主要介紹了jquery實(shí)現(xiàn)的簡(jiǎn)單輪播圖功能,涉及jQuery基于定時(shí)器的事件響應(yīng)與頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼
這篇文章主要介紹了jQuery動(dòng)態(tài)改變圖片顯示大小(修改版)的實(shí)現(xiàn)思路及代碼,有需要的朋友可以參考一下2013-12-12jQuery使用jsonp實(shí)現(xiàn)百度搜索的示例代碼
這篇文章主要介紹了jQuery使用jsonp實(shí)現(xiàn)百度搜索,文中示例代碼非常詳細(xì),幫助大家更好的理解和學(xué)習(xí),感興趣的朋友可以了解下2020-07-07jquery獲取復(fù)選框的值的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇jquery獲取復(fù)選框的值的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載
這篇文章主要介紹了基于jquery實(shí)現(xiàn)鼠標(biāo)左右拖動(dòng)滑塊滑動(dòng)附源碼下載 的相關(guān)資料,需要的朋友可以參考下2015-12-12