基于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中的其他对象
Jan 16 Javascript
javascript实现日历控件(年月日关闭按钮)
Dec 12 Javascript
js调用后台servlet方法实例
Jun 09 Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
Vue.js双向绑定实现原理详解
Dec 22 Javascript
利用JavaScript实现栈的数据结构示例代码
Aug 02 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
vue生命周期和react生命周期对比【推荐】
Sep 19 Javascript
JavaScript canvas实现雪花随机动态飘落
Feb 08 Javascript
解决vue addRoutes不生效问题
Aug 04 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分页函数代码(简单实用型)
2010/12/02 PHP
php将HTML表格每行每列转为数组实现采集表格数据的方法
2015/04/03 PHP
PHP实现数组array转换成xml的方法
2016/07/19 PHP
PHP CodeIgniter分页实例及多条件查询解决方案(推荐)
2017/05/20 PHP
JavaScript去掉空格的方法集合
2010/12/28 Javascript
JS操作select下拉框动态变动(创建/删除/获取)
2013/06/02 Javascript
Nodejs极简入门教程(一):模块机制
2014/10/25 NodeJs
jquery实现可拖拽弹出层特效
2015/01/04 Javascript
jQuery中removeClass()方法用法实例
2015/01/05 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
Vue.js Ajax动态参数与列表显示实现方法
2016/10/20 Javascript
对于Javascript 执行上下文的全面了解
2017/09/05 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
JS实现可视化文件上传
2018/09/08 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
JavaScript监听触摸事件代码实例
2019/12/30 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
python在控制台输出进度条的方法
2015/06/20 Python
django js实现部分页面刷新的示例代码
2018/05/28 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
详解如何用python实现一个简单下载器的服务端和客户端
2019/10/28 Python
html5中地理位置定位api接口开发应用小结
2013/01/04 HTML / CSS
日本卡普空电视游戏软件公司官方购物网站:e-CAPCOM
2018/07/17 全球购物
大学生村官心得体会范文
2014/01/04 职场文书
2014年教师节寄语
2014/04/03 职场文书
遗嘱公证书标准样本
2014/04/08 职场文书
重点工程汇报材料
2014/08/27 职场文书
开平碉楼导游词
2015/02/06 职场文书
学生逃课检讨书
2015/02/17 职场文书
入党自荐书范文
2015/03/05 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
2015年教学副校长工作总结
2015/07/22 职场文书
《搭石》教学反思
2016/02/18 职场文书
nginx实现动静分离的方法示例
2021/11/07 Servers