昨天同事问我的这个需求，效果大概是这样的
初始状态
需求的样式
简单的讲，就是把相同内容td进行纵向合并。自己写了个demo，虽然效果已经实现，但功能上还是稍微有点欠缺，刚好今天在网上搜到有相关的博文，拿来借鉴一下。整体上实现逻辑是一样的，但原作者的逻辑会更严谨一些，如果读者有更好的想法， 欢迎补充
直接上代码
·1. style样式
<style type="text/css">
table tr {
border: 1px dashed #ccc;
}
table tr td {
border: 1px dashed #ccc;
}
</style>
- html代码
<body>
<table style="width: 800px;height: 300px;border: 1px dashed #ccc;">
<tr>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
<th>Header</th>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>3</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>3</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>6</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>3</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>3</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>3</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>3</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>8</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>8</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>4</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>8</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>4</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>8</td>
<td>Data</td>
</tr>
<tr>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
<td>Data</td>
</tr>
</table>
</body>
- JavaScript代码
因为是基于jQuery写的插件，所以要引用jQuery文件。tablemerge.js是封装好的插件，直接调用就好
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tablemerge.js"></script>
<script type="text/javascript">
$('table').mergeCell({ //封装好的mergeCell方法直接引用即可
// 目前只有cols这么一个配置项, 用数组表示列的索引,从0开始
// 然后根据指定列来处理(合并)相同内容单元格
cols: [2, 7] //根据索引指定需要进行合并的td列
});
</script>
tablemerge.js代码
;(function($) {
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; i--) {
// fixbug console调试
// console.debug(cols[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);
写在最后
- for ( var i = cols.length - 1; cols[i] != undefined; i--)...如果表格数据量大, 处理的列也比较多, 这里不进行优化会有造成浏览器线程阻塞的风险, 可以考虑用setTimeout
- 有什么可以优化或改进的地方，欢迎留言讨论
关于此文
