<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<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 bgcolor="#fff000"><font color="red">夜班</font></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,方法中使用到的JQ是jQuery中的$方法的别名
使用js和jquery实现表格的展开和合并
jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！jquery datatable 单元格合并，通过js实现相同内容单元格动态合并！！！
jquery行列合并例子 版本：jquery-1.3.2.min.js
JQuery对表格行的添加删除,如添加一行，删除一行
jQuery table选中表格行变色 jQuery table选中表格行变色 jQuery table选中表格行变色
jquery.datatables，异步请求后台数据时，调用api动态合并行。
jQuery、JS编写的合并单元格，可以增加、删除、合并单元格
jQuery表格行展开隐藏代码是一款基于Bootstrap.js表格插件制作的table表格行展开收缩隐藏效果代码。
利用jquery实现表格动态分页，前台用jquery实现。后台用java实现动态查询数据，分页。
jquery对表格行操作，增删，只是多选删除。
jQuery表格行全选反选单选代码，例子采用bootstrap格式，可以选择自定义。
通过jQuery简单实现的一个合并单元格功能
可编辑的类似于excel功能的jQuery开发的表格，功能上还有很多的缺陷，望网上的各位牛人大哥们。帮小弟优化一下。并完善其功能 现在可以实现，添加或附加行列，删除行和列。简单的合并行或列。现在想将其添加到...
动态控制表格 增加行、选中行、删除行 直运行
Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)
jQuery 动态添加或删除表格行特效，每点击一次添加，会添加一个表格单元格，点击删除会删掉所有行，基于jQuery插件完成，想研究的朋友下载一看。
jquery实现表格排序，绝对实用。jquery实现表格排序，绝对实用。
如何使用jquery固定表格行列，固定table表头。