jquery單元格合併

時間 2019-11-07

標籤 jquery 單元格合併欄目 JQuery 简体版

原文原文鏈接

第一次遇到頁面單元格要在頁面加載完成後，作單元格合併的功能，記錄一下。javascript

<script type="text/javascript">
(function($) {
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; 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.attr("id");
//第一次時走此分支
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.attr("id"));
$table.data('col-rowspan', 1);
};
};
});
}html

//一樣是個private函數清理內存之用
function dispose($table) {
$table.removeData();
};

})(jQuery);java

$('#process').mergeCell({
//目前只有cols這麼一個配置項, 用數組表示列的索引,從0開始
//而後根據指定列來處理(合併)相同內容單元格
cols: [0,9]
});jquery

</script>小程序

測試小程序(轉)數組

<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
</head>
<body>
<table id="process" cellpadding="2" cellspacing="0" border="1">
<thead>
<tr >
<td>col0</td>
<td>col1</td>
<td>col2</td>
<td>col3</td>
</tr>
</thead>
<tbody>
<tr>
<td>SuZhou</td>
<td>11111</td>
<td>22222</td>
<td>SuZhouCity</td>
</tr>
<tr>
<td>SuZhou</td>
<td>33333</td>
<td>44444</td>
<td>SuZhouCity</td>
</tr>
<tr>
<td>SuZhou</td>
<td>55555</td>
<td>66666</td>
<td>SuZhouCity</td>
</tr>
<tr>
<td>ShangHai</td>
<td>77777</td>
<td>88888</td>
<td>ShangHaiCity</td>
</tr>
<tr>
<td>ShangHai</td>
<td>uuuuu</td>
<td>hhhhh</td>
<td>ShangHaiCity</td>
</tr>
<tr>
<td>ShangHai</td>
<td>ggggg</td>
<td>ccccc</td>
<td>ShangHaiCity</td>
</tr>
<tr>
<td>GuangZhou</td>
<td>ttttt</td>
<td>eeeee</td>
<td>GuangZhouCity</td>
</tr>
<tr>
<td>GuangZhou</td>
<td>ppppp</td>
<td>qqqqq</td>
<td>GuangZhouCity</td>
</tr>
</tbody>
</table>
</body>
</html>ide

<script type="text/javascript">
(function($) {
$.fn.mergeCell = function(options) {
return this.each(function() {
var cols = options.cols;
for ( var i = cols.length - 1; cols[i] != undefined; 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);測試

$('#process').mergeCell({
//目前只有cols這麼一個配置項, 用數組表示列的索引,從0開始
//而後根據指定列來處理(合併)相同內容單元格
cols: [0, 3]
});this

</script>

相關文章

相關標籤/搜索

合併單元格

jQuery Mobile 教程

PHP 7 新特性

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<