快捷導(dǎo)航

Jquery 表格合并的問題分享

更新時(shí)間：2011年09月17日 19:46:11 作者：

有朋友問GridView控件對(duì)于跨行合并的問題，這可以用控件嵌套來完成，當(dāng)然，我更喜歡在前臺(tái)來用JS來控制網(wǎng)頁(yè)元素的樣式，而后臺(tái)僅僅是根據(jù)客戶的請(qǐng)求，來返回?cái)?shù)據(jù)。

這里我使用Jquery庫(kù)，這個(gè)就不用過多介紹了，有幾個(gè)知識(shí)點(diǎn)：
　　- 選擇器tr:eq(index)，表示選擇指定index索引的tr元素，index索引從0開始
　　- tempRow.parent()，表示返回tempRow對(duì)象的父節(jié)點(diǎn)對(duì)象
　　- $("<td/>").prependTo()，表示將一個(gè)td元素添加到指定元素的內(nèi)容頭部
實(shí)例代碼
index.html

復(fù)制代碼代碼如下:

 
<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>出勤時(shí)間</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代碼的效果圖

運(yùn)行Jquery代碼的效果圖

小結(jié)
　　代碼寫得很粗糙，只是簡(jiǎn)單做個(gè)筆記，最近在忙著整理編寫一些Jquery插件和discuz插件，Python和PyQt的相關(guān)文章都未來得及整理發(fā)布，唉，時(shí)間不夠用啊，只能慢慢來了。Jquery是相當(dāng)不錯(cuò)的說，內(nèi)置Sizzle選擇器后，那速度更是飛一般，貌似現(xiàn)在到1.6版本了，希望越做越好吧！