爲了解決這樣的需求寫的插件 html
(function($){
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; i--) {
// 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); jquery