<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.4.1.min.js"></script>
<script>
jQuery.fn.extend({
group:function(){
var rowObj=$(this)[0];//记录需要合并的第一个单元格，会将其他重复的单元格删除
var cfcount=1;
this.each(function(i,row){
if(i>0)
if($(row).html()==$(rowObj).html())
{
cfcount++;
$(row).remove();
$(rowObj).attr("rowspan",cfcount);
}else{
$(rowObj).attr("rowspan",cfcount);
cfcount=1;
rowObj=row;
}
});
}});
$(document).ready(function(){
$(".group").group();
$(".group1").group();
$(".group2").group();
});
</script>
<style type="text/css">
body{ margin:0 0 0 0;}
table{border: 1px solid #A8D1E6;}
th{BACKGROUND-COLOR: #cdcdcd;}
input{width:95%;}
.odd{background-color:#FFFFFF;}
.eve{background-color:#eeeeee;}
button{border: 1px solid #000;}
</style>
</head>
<body>
<table border=1 id="grouptable">
<tr>
<td class="group">分组 </td><td class="group1">分组1</td><td class="group2">内容</td><td>1</td>
</tr>
<tr>
<td class="group">分组 </td><td class="group1">分组1</td><td class="group2">内容2</td><td>2</td>
</tr>
<tr>
<td class="group"> 分组</td><td class="group1">分组2</td><td class="group2">内容1</td><td>3</td>
</tr>
<tr>
<td class="group">分组 </td><td class="group1">分组2</td><td class="group2">内容3</td><td>4</td>
</tr>
<tr>
<td class="group">分组</td><td class="group1">分组3</td><td class="group2">内容4</td><td>5</td>
</tr>
<tr>
<td class="group">分组-1</td><td class="group1">分组1</td><td class="group2">内容1</td><td>6</td>
</tr>
<tr>
<td class="group">分组-1</td><td class="group1">分组1</td><td class="group2">内容1</td><td>7</td>
</tr>
<tr>
<td class="group">分组</td><td class="group1">分组2</td><td class="group2">内容1</td><td>8</td>
</tr>
</table>
</body>
</html>
用JQuery实现table按列分组（简单常用
5星 · 超过95%的资源 需积分: 50 17 浏览量
2012-04-14
14:43:09
上传
评论 1
收藏 26KB RAR 举报 
用JQuery实现table按列分组（简单常用）.rar （4个子文件） 
用JQuery实现table按列分组（简单常用） 
表1（列调用分组方法）.html 2KB
jquery.grouptable.js 5KB jquery-1.4.1.min.js 69KB 表2（表调用分组方法）.html 948B
- 1
- 2
- 3
前往页