用最简的代码和例子演示如何使用jQuery进行单元格合并
来源:互联网 发布:无限刷微信红包软件 编辑:程序博客网 时间:2024/05/16 19:37
前言
这几天的项目再次应用到了表格中单元格合并的功能,之前的有个项目是只在某一列中进行合并操作,因此代码是遍历每行的某一列单元格,而这次的需求比较复杂,列数很多,都可以动态显示隐藏,原来的代码功能明显不够用了,因此花了点时间,好好整理整理,才有了下面的用于表格单元格合并的插件。
本插件主要用于表格单元格的纵向合并,前提,每行的tr里都有一个属性,比如data-pid,当上下行数据的这个属性值相等时,将一列或者多列的单元格纵向,用class标识需要合并的列。有的情况下,是只有少数列不合并,因此也支持用class标识不需要合并列。
如果遇到本插件满足不了需求的情况,大家可以参考代码,根据代码处理逻辑修改出试用于自己需求的插件。
插件源码
//js文件/********************************************** * Copyright (C) Corporation. All rights reserved. * * Author : lihaitao * Email : lhtzbj12@126.com * Create Date : 2016-12-26 * Description : 表格单元格合并插件 * Version : V1.0 * * Revision History: * Date Author Description * 2016-12-26 lihaitao create * ***********************************************//调用实例 table 为页面里的表格$('table').sdrowpan({ onAttr: 'data-pid', //tr的属性名,两行数据中这个属性值相等时才进行合并 mergeClass: 'doMerge', //td的类名,当tr的onAttr值相等时,此td进行合并 notMergeClass: 'notMerge' //td的类名,当tr的onAttr值相等时,除此td以外其他td合并(**当mergeClass无有效值时才启用**)});*/(function ($) { $.fn.sdrowpan = function (options) { return this.each(function (index, element) { var that = undefined; $('tr', this).each(function (trIndex, tr) { var tdSelector = 'td'; if (typeof (options.mergeClass) !== 'undefined' && options.mergeClass.length > 0) { tdSelector += '.' + options.mergeClass; } else { tdSelector += ':not(.' + options.notMergeClass + ')'; } if (typeof that !== 'undefined' && typeof ($(tr).attr(options.onAttr)) !== 'undefined' && $(tr).attr(options.onAttr) === $(that).attr(options.onAttr)) { var firstTd = $(that).children(tdSelector); if (firstTd.length == 0) { return true; } var rowpan = firstTd.prop('rowspan'); rowpan += 1; $(that).children(tdSelector).prop('rowspan', rowpan); $(this).children(tdSelector).hide(); } else { that = tr; } }); }); };})(jQuery);
输入参数
参数表
示例程序源码
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <script src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script> <!-- 这里路径需要改成实际路径 --> <script src="jquery.sdrowspan.js"></script> <style> table { border-collapse: collapse !important; } th, td { border: 1px solid #999; padding: 10px 20px; } </style> </head><body> <table> <thead> <tr><th>标题1</th><th>标题2</th><th>标题3</th><th>标题4</th><th>标题5</th><th>标题5</th></tr> </thead> <tbody> <tr data-pid="0"><td class="doMerge">值1-1</td><td class="doMerge">值1-2</td><td>值1-3</td><td class="notMerge">值1-4</td><td>值1-5</td><td>值1-6</td></tr> <tr data-pid="0"><td class="doMerge">值2-1</td><td class="doMerge">值2-2</td><td>值2-3</td><td class="notMerge">值2-4</td><td>值2-5</td><td>值2-6</td></tr> <tr data-pid="1"><td class="doMerge">值3-1</td><td class="doMerge">值3-2</td><td>值3-3</td><td class="notMerge">值3-4</td><td>值3-5</td><td>值3-6</td></tr> <tr data-pid="1"><td class="doMerge">值4-1</td><td class="doMerge">值4-2</td><td>值4-3</td><td class="notMerge">值4-4</td><td>值4-5</td><td>值4-6</td></tr> <tr data-pid="2"><td class="doMerge">值5-1</td><td class="doMerge">值5-2</td><td>值5-3</td><td class="notMerge">值5-4</td><td>值5-5</td><td>值5-6</td></tr> </tbody> </table> <script> $(function () { $('table').sdrowpan({ onAttr: 'data-pid', //tr的属性名,两行数据中这个属性值相等时才进行合并 mergeClass: 'doMerge', //td的类名,当tr的onAttr值相等时,此td进行合并 notMergeClass: 'notMerge' //td的类名,当tr的onAttr值相等时,除此td以外其他td合并(**当mergeClass无有效值时才启用**) }); }); </script></body></html>
示例程序截图
$('table').sdrowpan({ onAttr: 'data-pid', //tr的属性名,两行数据中这个属性值相等时才进行合并 mergeClass: 'doMerge' //td的类名,当tr的onAttr值相等时,此td进行合并 });
上面代码执行的效果如下:
$('table').sdrowpan({ onAttr: 'data-pid', //tr的属性名,两行数据中这个属性值相等时才进行合并 notMergeClass: 'notMerge' //td的类名,当tr的onAttr值相等时,除此td以外其他td合并(**当mergeClass无有效值时才启用**)});
上面代码执行的效果如下
0 0
- 用最简的代码和例子演示如何使用jQuery进行单元格合并
- GridView多行多列合并单元格(完整代码和例子)
- GridView多行多列合并单元格(完整代码和例子)
- 基于JQuery实现相同内容合并单元格的代码
- 用最简单的例子演示如何使用js或者$.ajax进行跨域请求
- 使用POI对EXCEL进行单元格的合并
- 下面的例子演示如何通过 jQuery text() 和 html() 方法来获得内容:
- 使用JQuery实现HTML表格的单元格合并
- 使用JQuery实现HTML表格的单元格合并
- jQuery EasyUI使用教程之合并数据网格的单元格
- 使用JQuery实现HTML表格的单元格合并
- 如何对合并单元格进行筛选
- 合并单元格 js 代码和 freemark代码
- 使用jQuery 操作table 完成单元格合并
- Html合并单元格的使用
- jquery easyUI 中datagrid单元格的合并
- 合并table相同单元格的jquery插件
- JQUERY 合并内容相同的单元格
- 文章标题
- C++04_类中不写成员函数易犯错误模型
- 学习javascript数据结构(四)——树
- 有道API在Android开发中的使用
- Codeforces Round #326 (Div. 1) E. Duff as a Queen
- 用最简的代码和例子演示如何使用jQuery进行单元格合并
- MongoDB_Java连接Mongo 限制结果集数量
- 【Linux SELinux】提升系统安全(一)
- qt4与qt5的联系
- linux下编译c源码configure,make,make install等
- LeetCode-Hash-463. Island Perimeter
- 谷哥的小弟学前端(06)——CSS基础知识(4)
- 安卓通讯之《蓝牙与单片机通讯助手》①理清思路,准备工作。
- Full Disk Encryption(FDE)全盘加密开关