基于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中定义对象类别
Dec 22 Javascript
做网页的一些技巧(续)
Feb 01 Javascript
formStorage 基于jquery的一个插件(存储表单中元素的状态到本地)
Jan 20 Javascript
关于火狐(firefox)及ie下event获取的两种方法
Dec 27 Javascript
jQuery中json对象的复制方式介绍(数组及对象)
Jun 08 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
整理的比较全的event对像在ie与firefox浏览器中的区别
Nov 25 Javascript
javascript实现随时变化着的背景颜色
Apr 02 Javascript
JS中传递参数的几种不同方法比较
Jan 20 Javascript
ES5学习教程之Array对象
Apr 01 Javascript
详解离线安装npm包的几种方法
Nov 25 Javascript
详解如何在Vue项目中导出Excel
Apr 19 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 日常开发小技巧
2009/09/23 PHP
PHP 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
php启用sphinx全文搜索的实现方法
2014/12/24 PHP
替换php字符串中的单引号为双引号的方法
2017/02/16 PHP
PHP数组遍历的几种常见方式总结
2019/02/15 PHP
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js原生appendChild的bug解决心得分享
2013/07/01 Javascript
多种方式实现JS调用后台方法进行数据交互
2013/08/20 Javascript
利用jquery写的左右轮播图特效
2014/02/12 Javascript
JSON.parse()和JSON.stringify()使用介绍
2014/06/20 Javascript
jQuery源码分析之jQuery.fn.each与jQuery.each用法
2015/01/23 Javascript
理解Javascript的动态语言特性
2015/06/17 Javascript
基于javascript实现文字无缝滚动效果
2016/03/22 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
three.js中3D视野的缩放实现代码
2017/11/16 Javascript
简述vue中的config配置
2018/01/23 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
微信小程序实现上传图片裁剪图片过程解析
2019/08/22 Javascript
详解Vue 换肤方案验证
2019/08/28 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
jquery获取input输入框中的值
2019/11/13 jQuery
Vue 数据绑定的原理分析
2020/11/16 Javascript
Python科学计算之NumPy入门教程
2017/01/15 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
微信跳一跳游戏python脚本
2020/04/01 Python
python3实现点餐系统
2019/01/24 Python
用canvas显示验证码的实现
2020/04/10 HTML / CSS
美国在线宠物商店:Chewy
2019/01/12 全球购物
巡警年度自我鉴定
2014/02/21 职场文书
2014年大班元旦活动方案
2014/02/26 职场文书
老师对学生的评语
2014/04/18 职场文书
2014年劳动部工作总结
2014/12/11 职场文书
2015仓库保管员年终工作总结
2015/05/13 职场文书
医院病假条怎么写
2015/08/17 职场文书
python中%格式表达式实例用法
2021/06/18 Python