JQuery实现table行折叠效果以JSON做数据源

2020-05-22 17:07:31易采站长站整理

//设置行点击事件
$(“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 “<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”>初考时间</td>