table的td合并

表格合并单元格插件

最新推荐文章于 2024-05-24 17:50:52 发布

转载最新推荐文章于 2024-05-24 17:50:52 发布 · 2.4k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/wugong/blog/872929

文章标签：

#javascript #java #前端 #ViewUI

js网盘位置：http://pan.baidu.com/s/1nvv3seP

1、用法：最低要求：jq1.8

<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>导出table</title>
<link rel="stylesheet" href="../../common/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="../../common/js/jquery/1.11.1/jquery.min.js"></script>
<script src="../../common/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="table-responsive">
<table class="table table-bordered" id="content_info">
<caption>导出Excel头信息</caption>
<thead>
<tr>
<th>列头1</th>
<th>列头2</th>
<th>列头3</th></tr>
</thead>
<tbody>
<tr>
<td>A</td>
<td>B1</td>
<td>C1</td></tr>
<tr>
<td>A</td>
<td>B2</td>
<td>C2</td></tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td></tr>
<tr>
<td>A3</td>
<td>B4</td>
<td>C4</td></tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript" src="../../common/layer/3.0.3/layer.js"></script>
<script type="text/javascript" src="../../common/js/common/tablesMergeCell.js"></script>
<script type="text/javascript">
$(function(){
$('#content_info').tablesMergeCell({
cols: [0,1]//合并的列从0开始，按内容合并，相同的内容自动合并
});
});

</script>
</html>

2、tablesMergeCell.js

;(function($) {
$.fn.tablesMergeCell = function(options) {
var defaultsettings= {
automatic:true,
cols: null, // 用数组表示列的索引,从0开始,然后根据指定列来处理(合并)相同内容单元格
rows: null
};
var opts = $.extend(defaultsettings, options);
return this.each(function() {
var cols = opts.cols,
rows = opts.rows;
if(rows==null){
for ( var i = cols.length - 1; cols[i] != undefined; i--) {
tablesMergeCell($(this), cols[i]);
}
}else{
for ( var i = cols.length - 1,k=opts.rows.length-1; cols[i] != undefined; i--,k--) {
tablesMergeCell($(this), cols[i],k);
}
}

dispose($(this));
});

// 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
function tablesMergeCell($table, colIndex,rowIndex) {
$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) {
var $tr = $(this);
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', $tr);
var currentContent = $td.html();
if(opts.automatic){ // 内容
// 第一次时走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行与当前行内容相同
if ($table.data('col-content') == currentContent) {
addRowspan(); // 上一行与当前行内容相同则col-rowspan累加, 保存新值
}else{
newRowspan(); // 上一行与当前行内容不同
}
}
}else{ // 指定
if(opts.rows.length>0){
if(opts.rows[0].length==undefined){
for(var i=0; i<opts.rows.length; i++){
customRowspan(opts.rows[i],opts.rows.length);
}
}else{
for(var i=0; i<opts.rows[rowIndex].length; i++){
customRowspan(opts.rows[rowIndex][i],opts.rows[rowIndex].length);
}
}
}
}
function customRowspan(val,len){
if(index==val){
if ($table.data('col-content') == '') {
if(currentContent==''){
currentContent = true;
}
$table.data('col-content', currentContent);
$td.attr('rowspan', len);
}else{
$td.hide();
}
}
}
function addRowspan(){
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'));
}
}
function newRowspan(){
// 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();
}
};