jquery写的一个表格合并单元格的插件

最新推荐文章于 2017-07-07 16:35:05 发布

loyinonline

最新推荐文章于 2017-07-07 16:35:05 发布

阅读量1.3k

点赞数 1

文章标签： jquery class function border button input

本文链接：https://blog.csdn.net/loyinonline/article/details/5841036

版权

<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.3.2.min.js"></script>
<script>
String.prototype.trim = function()
{
    return this.replace(/(^/s*)|(/s*$)/g,"");
}
jQuery.fn.extend({
group:function (){
var rowObj=$(this)[0];//记录需要合并的第一个单元格，会将其他重复的单元格删除
var cfcount=1;
this.each(function(i,row){
  if(i>0)
  if($(row).html().trim()==$(rowObj).html().trim())
  {
   cfcount++;
     $(row).remove();
     $(rowObj).attr("rowspan",cfcount);
  }else{
   $(rowObj).attr("rowspan",cfcount);
   cfcount=1;
   rowObj=row;
  }
});
}});
$(function (){
$(".group").group();
$(".group1").group();
$(".group2").group();
//window.print();
});
</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>