使用jQuery怎么合并表格单元格中相同的行
这篇文章将为大家详细讲解有关使用jQuery怎么合并表格单元格中相同的行,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
成都创新互联公司专注于企业营销型网站建设、网站重做改版、宁江网站定制设计、自适应品牌网站建设、HTML5建站、商城系统网站开发、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为宁江等各大城市提供网站开发制作服务。
合并的方法
$("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列 })
/** * 操作表格 合并单元格 行 * 2016年12月13日16:00:41 */ (function($) { // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件 // 才保留了jQuery.prototype这个形式 $.fn.mergeCell = function(options) { return this.each(function() { var cols = options.cols; for ( var i = cols.length - 1; cols[i] != undefined; i--) { // fixbug console调试 // console.debug(cols[i]); mergeCell($(this), cols[i]); } dispose($(this)); }); }; // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法 // 具体可以参考本人前一篇随笔里介绍的那本书 function mergeCell($table, colIndex) { $table.data('col-content', ''); // 存放单元格内容 $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1 $table.data('col-td', $()); // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象 $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用 // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan $('tbody tr', $table).each(function(index) { // td:eq中的colIndex即列索引 var $td = $('td:eq(' + colIndex + ')', this); // 取出单元格的当前内容 var currentContent = $td.html(); // 第一次时走此分支 if ($table.data('col-content') == '') { $table.data('col-content', currentContent); $table.data('col-td', $td); } else { // 上一行与当前行内容相同 if ($table.data('col-content') == currentContent) { // 上一行与当前行内容相同则col-rowspan累加, 保存新值 var rowspan = $table.data('col-rowspan') + 1; $table.data('col-rowspan', rowspan); // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响 $td.hide(); // 最后一行的情况比较特殊一点 // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan if (++index == $table.data('trNum')) $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } else { // 上一行与当前行内容不同 // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理 if ($table.data('col-rowspan') != 1) { $table.data('col-td').attr('rowspan', $table.data('col-rowspan')); } // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan $table.data('col-td', $td); $table.data('col-content', $td.html()); $table.data('col-rowspan', 1); } } }); } // 同样是个private函数 清理内存之用 function dispose($table) { $table.removeData(); } })(jQuery);
示例html代码
酒店分房表
酒店信息和分房表
居住城市 入住日期 离店日期 酒店名称 地址 2016-12-11 2016-12-12 性格里拉 上海
房间类型 双床房 数量共计: 5 间 5
Room Adult 中文名 Name Sex Room Type 1 1 熊哥1 xsw 女 双床房1 1 2 熊哥2 xsw2222222 男 双床房1 1 3 杰森.斯坦森 Jason Statham 男 双床房1 2 4 李锡龄 Jason Statham 男 双床房2 2 5 李孝利 Jason Statham 男 双床房2 2 6 刘德国 Jason Statham 男 双床房2 3 7 杰森.四米 Jason Statham 男 双床房3 3 8 凯威.斯坦森 Jason Statham 男 双床房3 3 9 杰森史蒂文 Jason Statham 男 双床房3 4 10 5 Jason Statham 男 双床房4 4 11 3 Jason Statham 男 双床房4 4 12 1 Jason Statham 男 双床房4 4 13 杰森.托马鞍山 Jason Statham 男 双床房4 5 14 孙露 Jason Statham 男 双床房5 5 15 李红梅 Jason Statham 男 双床房5 5 16 卓越杀 Jason Statham 男 双床房5 5 17 4 Jason Statham 男 双床房5 5 18 12 Jason Statham 男 双床房5 5 19 16 Jason Statham 男 双床房5
运行结果:
关于使用jQuery怎么合并表格单元格中相同的行就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
名称栏目:使用jQuery怎么合并表格单元格中相同的行
标题网址:http://azwzsj.com/article/jsjjgc.html