基于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 相关文章推荐
Javascript监视变量变化的方法
Jun 09 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
Mar 02 Javascript
Node+Express+MongoDB实现登录注册功能实例
Apr 23 Javascript
jQuery 利用ztree实现树形表格的实例代码
Sep 27 jQuery
vue项目常用组件和框架结构介绍
Dec 24 Javascript
js中async函数结合promise的小案例浅析
Apr 14 Javascript
通过实例了解Javascript柯里化流程
Mar 03 Javascript
vue全局使用axios的操作
Sep 08 Javascript
Vue toFixed保留两位小数的3种方式
Oct 23 Javascript
使用node-media-server搭建一个简易的流媒体服务器
Jan 20 Javascript
Vue3实现简易音乐播放器组件
Aug 14 Vue.js
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
thinkphp连贯操作实例分析
2014/11/22 PHP
CI框架无限级分类+递归的实现代码
2016/11/01 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
JavaScript DOM学习第一章 W3C DOM简介
2010/02/19 Javascript
Js 刷新框架页的代码
2010/04/13 Javascript
jQuery实用基础超详细介绍
2013/04/11 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
浅谈JavaScript的Polymer框架中的behaviors对象
2015/07/29 Javascript
尝试动手制作javascript放大镜效果
2015/12/25 Javascript
JS实现为排序好的字符串找出重复行的方法
2016/03/02 Javascript
BackBone及其实例探究_动力节点Java学院整理
2017/07/14 Javascript
vue项目打包部署到服务器的方法示例
2018/08/27 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
[58:00]DOTA2-DPC中国联赛 正赛 PSG.LGD vs Elephant BO3 第二场 2月7日
2021/03/11 DOTA
Python ldap实现登录实例代码
2016/09/30 Python
Python基于最小二乘法实现曲线拟合示例
2018/06/14 Python
Python切片操作深入详解
2018/07/27 Python
Python 获取windows桌面路径的5种方法小结
2019/07/15 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
Python 找出出现次数超过数组长度一半的元素实例
2020/05/11 Python
HTML5 video进入全屏和退出全屏的实现方法
2020/07/28 HTML / CSS
联想马亚西亚官方网站:Lenovo Malaysia
2018/09/19 全球购物
尼克松手表官网:Nixon手表
2019/03/17 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
小学家长会邀请函
2014/01/23 职场文书
求职教师自荐书
2014/06/19 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
2019年大学生职业生涯规划书
2019/03/25 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
MySQL下使用Inplace和Online方式创建索引的教程
2021/05/26 MySQL
vue实现在data里引入相对路径
2022/06/05 Vue.js
在Oracle表中进行关键词搜索的过程
2022/06/10 Oracle