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


Posted in Javascript onJanuary 12, 2011

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>

IE效果  
基于JQuery实现相同内容合并单元格的代码
火狐效果  
基于JQuery实现相同内容合并单元格的代码
更多的前端开发可以关注 UI前端

Javascript 相关文章推荐
网页图片延时加载的js代码
Apr 22 Javascript
jQuery dialog 异步调用ashx,webservice数据的代码
Aug 03 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
jQuery表单域属性过滤器用法分析
Feb 10 Javascript
在AngularJS框架中处理数据建模的方式解析
Mar 05 Javascript
细数JavaScript 一个等号,两个等号,三个等号的区别
Oct 09 Javascript
微信小程序  网络请求API详解
Oct 25 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
详解使用webpack打包编写一个vue-toast插件
Nov 08 Javascript
基于Vue开发数字输入框组件
Dec 19 Javascript
Javascript实现一朵从含苞到绽放的玫瑰
Mar 30 Javascript
vue 实现 rem 布局或vw 布局的方法
Nov 13 Javascript
jquery EasyUI的formatter格式化函数代码
Jan 12 #Javascript
Script的加载方法小结
Jan 12 #Javascript
javascrip客户端验证文件大小及文件类型并重置上传
Jan 12 #Javascript
javascript smipleChart 简单图标类
Jan 12 #Javascript
javascript Window及document对象详细整理
Jan 12 #Javascript
XMLHTTP 乱码的解决方法(UTF8,GB2312 编码 解码)
Jan 12 #Javascript
奉献给JavaScript初学者的编写开发的七个细节
Jan 11 #Javascript
You might like
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php第一次无法获取cookie问题处理
2014/12/15 PHP
php mysql PDO 查询操作的实例详解
2017/09/23 PHP
Laravel5.5 手动分页和自定义分页样式的简单实现
2019/10/15 PHP
PHP判断当前使用的是什么浏览器(推荐)
2019/10/27 PHP
jquery自动完成插件(autocomplete)应用之PHP版
2009/12/15 Javascript
Tab页界面 用jQuery及Ajax技术实现(php后台)
2011/10/12 Javascript
jQuery实用函数用法总结
2014/08/29 Javascript
jq实现左侧显示图片右侧文字滑动切换效果
2015/08/04 Javascript
理解javascript闭包
2015/12/15 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
Bootstrap基本模板的使用和理解1
2016/12/14 Javascript
JS利用cookies设置每隔24小时弹出框
2017/04/20 Javascript
JS自动生成动态HTML验证码页面
2017/06/14 Javascript
cocos creator Touch事件应用(触控选择多个子节点的实例)
2017/09/10 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
2018/10/01 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
vue项目使用.env文件配置全局环境变量的方法
2019/10/24 Javascript
vue + elementUI实现省市县三级联动的方法示例
2019/10/29 Javascript
js实现移动端图片滑块验证功能
2020/09/29 Javascript
[02:31]DOTA2帕克 英雄基础教程
2013/11/26 DOTA
[02:56]DOTA2上海特锦赛小组赛解说FreeAgain采访花絮
2016/02/27 DOTA
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
举例讲解Python中metaclass元类的创建与使用
2016/06/30 Python
Python实现调度算法代码详解
2017/12/01 Python
Python for循环生成列表的实例
2018/06/15 Python
在python中使用requests 模拟浏览器发送请求数据的方法
2018/12/26 Python
python 图像判断,清晰度(明暗),彩色与黑白实例
2020/06/04 Python
python中get和post有什么区别
2020/06/19 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
驾驶员岗位职责
2014/01/29 职场文书
浪漫婚礼主持词
2014/03/14 职场文书
幼儿园校园小喇叭广播稿
2014/10/17 职场文书
浅谈Python响应式类库RxPy
2021/06/14 Python
vue项目打包后路由错误的解决方法
2022/04/13 Vue.js
Python 文字识别
2022/05/11 Python