<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() ;
					}

				}) ;
			}