Jquery 表格合並的問題分享
編輯：JQuery特效代碼
這裡我使用Jquery庫，這個就不用過多介紹了，有幾個知識點：
- 選擇器tr:eq(index)，表示選擇指定index索引的tr元素，index索引從0開始
- tempRow.parent()，表示返回tempRow對象的父節點對象
- $("<td/>").prependTo()，表示將一個td元素添加到指定元素的內容頭部
實例代碼
index.html
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" language="javascript" ></script>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#gridview, #gridview td { border:1px #ccc solid; border-collapse:collapse; }
-->
</style>
</head>
<body>
<table id="gridview" width="386" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="59" align="center"><strong>課別</strong></td>
<td width="76" align="center"><strong>班別</strong></td>
<td width="73" align="center"><strong>班次</strong></td>
<td width="130" align="center"><strong>出勤時間</strong></td>
</tr>
<tr>
<td>陳偉勳</td>
<td>一班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>一班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>兩班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>三班制</td>
<td>早班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>三班制</td>
<td>中班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>三班制</td>
<td>晚班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>一班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>兩班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>三班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>三班制</td>
<td>中班</td>
<td>2011-09-09</td>
</tr>
</table>
<script>
var grid = $("#gridview");
var rowCount = grid.find("tr").length - 1;
var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html();
var sp = 0;
for(var i = rowCount; i >=0; i--) {
var tempRow = grid.find("tr:eq("+i+")");
if(flagRow == tempRow.find("td:eq(0)").html()) {
tempRow.find("td:eq(0)").remove();
}
else {
$("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+1)+")"));
flagRow = tempRow.find("td:eq(0)").html();
sp = rowCount-i;
if(i != 0) {
tempRow.find("td:eq(0)").remove();
}
}
}
</script>
</body>
</html>
注釋掉Jquery代碼的效果圖
- 選擇器tr:eq(index)，表示選擇指定index索引的tr元素，index索引從0開始
- tempRow.parent()，表示返回tempRow對象的父節點對象
- $("<td/>").prependTo()，表示將一個td元素添加到指定元素的內容頭部
實例代碼
index.html
代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery.js" language="javascript" ></script>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
#gridview, #gridview td { border:1px #ccc solid; border-collapse:collapse; }
-->
</style>
</head>
<body>
<table id="gridview" width="386" border="0" cellspacing="0" cellpadding="6">
<tr>
<td width="59" align="center"><strong>課別</strong></td>
<td width="76" align="center"><strong>班別</strong></td>
<td width="73" align="center"><strong>班次</strong></td>
<td width="130" align="center"><strong>出勤時間</strong></td>
</tr>
<tr>
<td>陳偉勳</td>
<td>一班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>一班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>兩班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>三班制</td>
<td>早班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>三班制</td>
<td>中班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>陳偉勳</td>
<td>三班制</td>
<td>晚班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>一班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>兩班制</td>
<td>白班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>兩班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>三班制</td>
<td>夜班</td>
<td>2011-09-09</td>
</tr>
<tr>
<td>張文軍</td>
<td>三班制</td>
<td>中班</td>
<td>2011-09-09</td>
</tr>
</table>
<script>
var grid = $("#gridview");
var rowCount = grid.find("tr").length - 1;
var flagRow = grid.find("tr:eq("+rowCount+")").find("td:eq(0)").html();
var sp = 0;
for(var i = rowCount; i >=0; i--) {
var tempRow = grid.find("tr:eq("+i+")");
if(flagRow == tempRow.find("td:eq(0)").html()) {
tempRow.find("td:eq(0)").remove();
}
else {
$("<td/>").attr("rowspan", rowCount-i-sp).html(flagRow).prependTo(tempRow.parent().find("tr:eq("+(i+1)+")"));
flagRow = tempRow.find("td:eq(0)").html();
sp = rowCount-i;
if(i != 0) {
tempRow.find("td:eq(0)").remove();
}
}
}
</script>
</body>
</html>
注釋掉Jquery代碼的效果圖
小結
代碼寫得很粗糙，只是簡單做個筆記，最近在忙著整理編寫一些Jquery插件和discuz插件，Python和PyQt的相關文章都未來得及整理發布，唉，時間不夠用啊，只能慢慢來了。Jquery是相當不錯的說，內置Sizzle選擇器後，那速度更是飛一般，貌似現在到1.6版本了，希望越做越好吧！
小編推薦
熱門推薦