文档章节

基于JQuery实现相同内容合并单元格的代码

阿丢丢
 阿丢丢
发布于 2014/06/10 16:45
字数 345
阅读 39
收藏 0

web前端开发的时候经常会遇到要做表单的页面或者做一些表格的效果如相同内容要同一个单元格里面显示,一般的方法是table里面在套table但是这种方法会增加页面的负担影响页面加载速度但是如果用DIV有不好控制写的css样式要很多,那怎么办呢?我们就中和下利用JQuery来和他一个table里面相同内容的单元格,这里代码跟大家分享下,希望对大家有用,如下: 


<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>


本文转载自:

共有 人打赏支持
阿丢丢
粉丝 11
博文 36
码字总数 23897
作品 0
南通
后端工程师
私信 提问
改善你的jQuery的25个步骤

从Google Code加载jQuery Google Code上已经托管了多种JavaScript类库,从Google Code上加载jQuery比直接从你的服务器加载更有优势。它节省了你服务器上的带宽,能够很快的从Google的内容分布...

ddtt
2011/12/29
0
1
jquery的extend和fn.extend

jQuery为开发插件提拱了两个方法,分别是: jQuery.fn.extend(object); jQuery.extend(object); jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。 jQuery.fn.extend(object);给...

crazyinsomnia
2010/01/10
1K
1
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.4K
10
jquery表格

新闻来源:noupe.com 本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行...

长平狐
2012/10/16
386
1
jQuery 表格插件汇总

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

晨曦之光
2012/03/09
321
0

没有更多内容

加载失败,请刷新页面

加载更多

深入理解JVM—JVM内存模型

深入理解JVM—JVM内存模型 我们知道,计算机CPU和内存的交互是最频繁的,内存是我们的高速缓存区,用户磁盘和CPU的交互,而CPU运转速度越来越快,磁盘远远跟不上CPU的读写速度,才设计了内存...

onedotdot
24分钟前
1
0
MVC、MVCS、MVVM、MVP、VIPER等这么多架构模式哪一个好呢?

在项目开启阶段,其中一个很重要的环节就是选架构。 那么面对目前已知的这么多架构模式我们该怎么选择呢?这确实是个很让人头疼的问题! 下面我就在这里梳理一下目前常见的一些架构模式。 先...

Java干货分享
今天
3
0
简单模仿配置文件的反射机制

//Student类 public class Student { public void love() { System.out.println("python"); } } //Tesy类 public class Tesy { public static void main(String[] args) throws Exceptio......

南桥北木
今天
2
0
你真的需要了解一下CSS变量 var()的用法

当Web项目变得越来越大时,他的CSS会变得像天文数字那么大而且还变得混乱。为了帮助我们解决这个问题,新的CSS变量很快就会出现在主流浏览器中,它让开发人员能够重用并轻松编辑重复出现的C...

前端小攻略
今天
1
0
嵌入式应用选择合适的微控制器

为嵌入式应用选择微控制器有几个原因,即低成本,高集成度,增加可靠性,节省空间等。 准备所需硬件接口列表使用微控制器的基本硬件框图,准备一份微控制器需要支持的所有外设接口的列表。微...

linux-tao
今天
5
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部