<jquery>jquery动态合并表格

1.适用场景

在前端的表格数据展示中，有时候需要进行部分数据的行合并，如下图，将1的数据合并成2的样子。

2.调用规则

1.html

2.js

3.原理

用class来标记要合并处理的单元td，每个合并的列用不同的class标记，该方法会进行比较，相邻相同的列的html相同，则进行合并。该html内容可以包括隐藏主键。

在第三个参数中，如果为空，则不进行限制，合并的行数可能超过预期值。（合并过多），通过在设置在此之前合并的class类，进行rowspan的 判断。

4.实现代码

/** * 合并列单元 * @param id tableId         * @param classArr 要处理的td的class集合         * @param classLimit 限制合并行数td的class         */function(id,classArr,classLimit) {if(id === null || id === undefined) {console.log(id + " is empty . ") ;return ;}if(!classArr instanceof Array) {console.log(classArr + " is not array . ") ;return ;}var length = classArr.length ;if(0 === length ) {console.log(classArr + " is empty . ") ;return ;}if(0 < length ) {for(var i = 0 ;i < length ;i ++) {if(classArr[i].indexOf('.') > 0) {console.log(classArr + "--" + classArr[i] + " is not legal,it can't contains '.' . ") ;}}}/*var limit = $('.' + classLimit) .length ;*/for(var i = 0 ;i < length ;i ++) {var colClass = classArr[i] ;var $col = $('#' + id).find('.' + colClass) ;var size = $col.length ;var _index = 0 ;$col.each(function(k){if(_index === size - 1) {$(this).attr('rowspan',1) ;return ;}if(k >= _index ) {var _jump = 0 ;do {_jump ++ ;}while($(this).html() === $col.eq(k + _jump).html()) ;if(null !== classLimit && _jump > 1) {var _limit = $(this).parent().find('.' + classLimit).attr('rowspan') * 1 ;if(_jump > _limit) {_jump = _limit ;}}$(this).attr('rowspan',_jump) ;_index += _jump ;}}) ;$col.each(function(){if(undefined === $(this).attr('rowspan')) {$(this).remove() ;}}) ;}