テーブル内の同じセルを結合するための jquery プラグインの共有 (非常に効率的)_jquery

// 这里書成了一个jquery插件の形式
$('#process').mergeCell({
// 目前だけcols这么一構成项, 用数组表示列的インデックス, 从0开始
// その後指定列に基づいて来处理(合并)同内容单元格
cols: [0, 3]
});

;(function($) {
// After looking at the jquery source code, you can find that $.fn is $.prototype, jQuery is only retained for compatibility with earlier versions of the plug-in
// The form of prototype
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; i--) {
// fixbug console debugging
// console.debug(cols[i]);
mergeCell($(this), cols [i]);
}
dispose($(this));
});
};
// If you have a clear understanding of the concepts of closure and scope in JavaScript, this is a plug-in Private methods used internally
// For details, please refer to the book introduced in my previous essay
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // Store cell content
$table.data('col-rowspan', 1); // Store calculated rowspan value, which defaults to 1
$table.data('col-td' , $()); // Store the first td found that is different from the previous row (encapsulated by jQuery), defaulting to an "empty" jquery object
$table.data('trNum', $( 'tbody tr', $table).length); //The total number of rows of the table to be processed, used for judgment when the last row is subjected to special processing
//The key is to "scan" each row of data. It is to locate col-td, and its corresponding rowspan
$('tbody tr', $table).each(function(index) {
// colIndex in td:eq is the column index
var $td = $('td:eq(' colIndex ')', this);
// Get the current content of the cell
var currentContent = $td.html();
// First Take this branch the next time
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table. data('col-td', $td);
} else {
// The previous row has the same content as the current row
if ($table.data('col-content') == currentContent) {
// If the content of the previous row is the same as the current row, col-rowspan is accumulated and the new value is saved
var rowspan = $table.data('col-rowspan') 1;
$table.data(' col-rowspan', rowspan);
// It is worth noting that if $td.remove() is used, it will affect the processing of other columns
$td.hide();
// The situation in the last line is a bit special
// For example, the contents of the td in the last two lines are the same, then the td saved in col-td at this time should be set to rowspan in the last line
if ( index = = $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // The content of the previous row is different from the current row
// col-rowspan defaults to 1, if the calculated col-rowspan has not changed, it will not be processed
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// Save the first Once a td with different content appears, and its content, reset col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $ td.html());
$table.data('col-rowspan', 1);
}
}
});
}
// also private Function to clean up memory
function dispose($table) {
$table.removeData();
}
})(jQuery);