基于JQuery实现相同内容合并单元格的代码
更新时间：2011年01月12日 16:34:49 作者：
我们就中和下利用JQuery来和他一个table里面相同内容的单元格，这里代码跟大家分享下，希望对大家有用
web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示，一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多，那怎么办呢？我们就中和下利用JQuery来和他一个table里面相同内容的单元格，这里代码跟大家分享下，希望对大家有用，如下：
头部JQuery代码
<script type="text/javascript">
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
$(function() {
$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值
$(“#table1″).rowspan(2);
});
</script>
在body里面加入一个表格
<body>
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>f</td>
<td>3</td>
<td>s</td>
</tr>
</table>
</body>
头部JQuery代码
复制代码 代码如下:
<script type="text/javascript">
jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}
$(function() {
$(“#table1″).rowspan(0);//传入的参数是对应的列数从0开始，哪一列有相同的内容就输入对应的列数值
$(“#table1″).rowspan(2);
});
</script>
在body里面加入一个表格
复制代码 代码如下:
<body>
<table id="table1" border="1" cellpadding="5" cellspacing="0" width="300px">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>f</td>
<td>3</td>
<td>s</td>
</tr>
</table>
</body>
IE效果 
火狐效果 
更多的前端开发可以关注 UI前端
相关文章
这篇文章主要介绍了jquery实现放大镜简洁代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下2017-06-06
在淘宝购物，需要把商品加入购车，其中包含全选、单选金额改变，当增加商品时金额也会相应的发生变化，下面通过本文给大家分享纯jquery实现模仿淘宝购物车结算，需要的朋友可以参考下2015-08-08
tab切换，是一个很常见的效果，今天在项目中遇到这样一个问题。就是切换后，页面刷新，又重新定位到第一个上了，很是郁闷2012-05-05
jQuery之所以如此流行并被从大公司到个人博客的几乎每个人都广泛使用，是因为它上手和使用相当简单，而且为我们提供了一些人都不知道的相当棒的特性。2010-01-01
下面小编就为大家带来一篇动态设置form表单的action属性的值的简单方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家详细介绍了jquery实现点击弹出对话框，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-02-02
jquery animate 动画效果使用说明，需要的朋友可以参考下。2009-11-11
$.ajax下json数据的传递方法，大家可以参考下。这样就可以传递json数据了2008-11-11
本文给大家介绍的是使用jQuery实现仿路边灯箱广告图片轮播切换特效，效果非常棒，有需要的小伙伴可以参考下。2015-04-04
这篇文章主要为大家详细介绍了jQuery实现移动端扭蛋机抽奖，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-11-11
最新评论