您的位置:时时app平台注册网站 > 彩世界网址 > 合并table相同单元格的jquery插件分享_jquery_脚本之

合并table相同单元格的jquery插件分享_jquery_脚本之

2019-11-28 03:09

SuZhouCity

col3

eeeee

ShangHai

复制代码 代码如下: // 这里写成了七个jquery插件的款型 $.mergeCell({ // 近些日子独有cols这么二个构造项, 用数组表示列的目录,从0开头 // 然后依据钦赐列来管理相通内容单元格 cols: [0, 3] }); 上边看看那一个小插件的完全代码: 复制代码 代码如下: ; { // 看过jquery源码就足以窥见$.fn正是$.prototype, 只是为着协作早先时期版本的插件 // 才保留了jQuery.prototype那一个形式$.fn.mergeCell = function { return this.each { var cols = options.cols; for ( var i = cols.length - 1; cols[i] != undefined; i--) { // fixbug console调节和测量检验 // console.debug; mergeCell; } dispose; }; // 要是对javascript的closure和scope概念相比清楚, 这是个插件内部使用的private方法 // 具体能够参照本人前生龙活虎篇小说里介绍的那本书 function mergeCell { $table.data; // 贮存单元格内容 $table.data; // 贮存总括的rowspan值 默以为1 $table.data; // 贮存发掘的第一个与前黄金时代行相比结实不相同td, 默许多个"空"的jquery对象 $table.data('trNum', $.length); // 要拍卖表格的母公司数, 用于最后风华正茂行做特殊管理时进行判定之用 // 我们对每生龙活虎行数据开展"扫面"管理 关键是原则性col-td, 和其相应的rowspan $.each { // td:eq中的colIndex即列索引 var $td = $('td:eq', this); // 抽取单元格的当前内容 var currentContent = $td.html(); // 第壹回时走此分支 if ($table.data { $table.data('col-content', currentContent); $table.data; } else { // 上大器晚成行与当下行内容少年老成律 if ($table.data == currentContent) { // 上风姿洒脱行与近年来进内容千篇风华正茂律则col-rowspan累计, 保存新值 var rowspan = $table.data 1; $table.data('col-rowspan', rowspan); // 值得注意的是 倘若用了$td.remove()就能够对别的列的拍卖产生影响 $td.hide(); // 最终后生可畏行的场馆相比独特一点 // 比方最终2行 td中的内容是同等的, 那么到终极生龙活虎行就应该把那儿的col-td里保存的td设置rowspan if ( index == $table.data $table.data.attr('rowspan', $table.data; } else { // 上生龙活虎行与当前进内容莫衷一是 // col-rowspan默以为1, 假诺总括出的col-rowspan未有成形, 不管理 if ($table.data { $table.data.attr('rowspan', $table.data; } // 保存第二回面世分裂内容的td, 和其内容, 重新载入参数col-rowspan $table.data; $table.data('col-content', $td.html; $table.data; } } }); } // 相同是个private函数 清理内部存款和储蓄器之用 function dispose { $table.removeData; 重要的求证在解说里应该都有了, 代码的确比较轻便, 像有个别地点还值得改革管理的table内容是从tbody发轫查找的, 若无tbody, 那应该提交个更通用化的方案 for ( var i = cols.length - 1; cols[i] != undefined; i--)...如若表格数据量大, 管理的列也正如多, 这里不开展优化会有导致浏览器线程梗塞的风险, 能够盘算用setTimeout 其余什么值得订正的, 笔者想应该会点不清的

SuZhou1111122222SuZhouCitySuZhou3333344444SuZhouCitySuZhou5555566666SuZhouCityShangHai7777788888ShangHaiCityShangHaiuuuuuhhhhhShangHaiCityShangHaigggggcccccShangHaiCityGuangZhouttttteeeeeGuangZhouCityGuangZhoupppppqqqqqGuangZhouCity

拍卖今后的样子:

col1

GuangZhou

22222

55555

ttttt

ggggg

GuangZhouCity

uuuuu

SuZhou1111122222SuZhouCity33333444445555566666ShangHai7777788888ShangHaiCityuuuuuhhhhhgggggcccccGuangZhouttttteeeeeGuangZhouCitypppppqqqqq

77777

66666

hhhhh

11111

col0

原表格:

ShangHaiCity

SuZhou

ccccc

ShangHaiCity

ShangHai

44444

33333

GuangZhou

ppppp

qqqqq

GuangZhouCity

效率出来, 看上去比较轻巧, 下边先看下页面 复制代码 代码如下:

ShangHaiCity

SuZhouCity

ShangHai

col2

SuZhou

col0col1col2col3

SuZhouCity

88888

col0col1col2col3

效果与利益如下

SuZhou

本文由时时app平台注册网站发布于彩世界网址,转载请注明出处:合并table相同单元格的jquery插件分享_jquery_脚本之

关键词:

  • 上一篇:516学习
  • 下一篇:没有了