文档章节

基于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
0
1
3个简单的事情,使你的jQuery代码变得更加棒

     jQuery是现存最流行的(如果不是最多的)JavaScript库之一,并且大量的人使用它来做一些令人惊叹的事情。就个人而言,jQuery让我对学习JavaScript感到兴奋。问题是很多程序员不明白...

webstack前端栈
04/14
0
0
jquery的一些用法 有用的用法。

AJAX 框架 用Asp.net ajax 还是 Jquery? AJAX 流行之后,总想好好学习一下。但是众多的框架实在难以选择。说明一下 ASP.NETAJAX 并不包括在 AJAX 框架之中。 刚开始学了 JQuqery,众多的 $g...

雪中漫步
2010/03/29
0
0
理解jquery的$.extend

理解jquery的$.extend 今日在写js插件过程中需要使用扩展对象的方法,便想到了jQuery.extend这个方法,但又不甚了解,故去查了下官方API文档,自己也进行了相应尝试,现将所得总结如下: $....

胡洋
2017/02/28
0
0

没有更多内容

加载失败,请刷新页面

加载更多

阿里云建站

阿里云自营建站 没想到阿里云已经切入这块市场了。可以用拖动的方式来建站的模式,真的还是6.

miaojiangmin
22分钟前
2
0
linux系统top命令:virt,res,shr详解

VIRT:virtual memory usage 虚拟内存 1、进程“需要的”虚拟内存大小,包括进程使用的库、代码、数据等 2、假如进程申请100m的内存,但实际只使用了10m,那么它会增长100m,而不是实际的使用...

刘祖鹏
28分钟前
1
0
day154-2018-11-21-英语流利阅读-待学习

快手网红发明家:百万粉丝 vs 零销量 雪梨 2018-11-21 1.今日导读 “我做了一个‘雷神锤’的斜挎包,你看这里可以打开,里面可以装手机、卫生纸、钱包,觉得轻的话可以放一些砖头。咱们把它背...

飞鱼说编程
35分钟前
8
0
图灵奖得主华人高徒发布AI芯片!64位RISC-V、高度可编程,低功耗

作为RISC-V架构下的旗手玩家,睿思芯科自然希望通过产品展现出RISC-V可编程架构的巨大潜力。 https://mbd.baidu.com/newspage/data/landingshare?context=%7B%22nid%22:%22news_917924603675...

whoisliang
35分钟前
2
0
xcode 10 缺少 libstdc++6.0.9 解决方案

image.png 本方案基于xcode10正式版操作,其它版本请自行验证! 苹果在XCode10中移除了libstdc++(libstdc++.6、libstdc++6.0.9)库。 项目解决方法:删除libstdc++(libstdc++.6、libstdc++6....

壹峰
39分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部