我想把图中值相同的列，通过jquery动态合并单元格，哪位大神指导一下？急！！！！ 10

 我来答

你的回答被采纳后将获得：
系统奖励15（财富值+成长值）+难题奖励10（财富值+成长值）+提问者悬赏10（财富值+成长值）

1个回答

匿名用户
2015-09-01

展开全部

试试这个：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
    
<script type="text/javascript" src="jquery.min.js"></script> 

<script type="text/javascript"> 
;(function($) { 
	$.fn.mergeCell = function(options) { 
		return this.each(function() { 
			var cols = options.cols; 
			for ( var i = cols.length - 1; cols[i] != undefined; i--) { 
				mergeCell($(this), cols[i]); 
			} 
			dispose($(this)); 
		}); 
	}; 
	

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



$(function() { 
	$('#process').mergeCell({ 
		cols: [0, 1,2,3] 
	}); 
}); 
</script> 

  </head>
  
  <body>
    <table id="process" cellpadding="2" cellspacing="0" border="1"> 
	<thead> 
	<tr > 
	<td>col0</td> 
	<td>col1</td> 
	<td>col2</td> 
	<td>col3</td> 
	</tr> 
	</thead> 
	<tbody> 
	<tr> 
	<td>SuZhou</td> 
	<td>11111</td> 
	<td>22222</td> 
	<td>SuZhouCity</td> 
	</tr> 
	<tr> 
	<td>SuZhou</td> 
	<td>11111</td> 
	<td>44444</td> 
	<td>SuZhouCity</td> 
	</tr> 
	<tr> 
	<td>SuZhou</td> 
	<td>55555</td> 
	<td>66666</td> 
	<td>SuZhouCity</td> 
	</tr> 
	<tr> 
	<td>ShangHai</td> 
	<td>77777</td> 
	<td>88888</td> 
	<td>ShangHaiCity</td> 
	</tr> 
	<tr> 
	<td>ShangHai</td> 
	<td>77777</td> 
	<td>hhhhh</td> 
	<td>ShangHaiCity</td> 
	</tr> 
	<tr> 
	<td>ShangHai</td> 
	<td>ggggg</td> 
	<td>ccccc</td> 
	<td>ShangHaiCity</td> 
	</tr> 
	<tr> 
	<td>GuangZhou</td> 
	<td>ttttt</td> 
	<td>eeeee</td> 
	<td>GuangZhouCity</td> 
	</tr> 
	<tr> 
	<td>GuangZhou</td> 
	<td>ppppp</td> 
	<td>qqqqq</td> 
	<td>GuangZhouCity</td> 
	</tr> 
	</tbody> 
</table> 

  </body>
</html>