Jquery 表格合并的问题分享

172 阅读 0 评论 114 点赞

我是靠谱客的博主纯真帽子，最近开发中收集的这篇文章主要介绍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> 