昨天同事問我的這個需求，效果大概是這樣的
初始狀態
需求的樣式
簡單的講，就是把相同內容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
- 有什么可以優化或改進的地方，歡迎留言討論
關于此文
