基于jquery的合并table相同單元格的插件(精簡版)
更新時間:2011年04月05日 20:04:28 作者:
正好項目中有個小需求, 要求把表格指定列中內(nèi)容相同的單元格進行合并,本質(zhì)上涉及的就是td的rowspan屬性, 數(shù)出含相同內(nèi)容單元格的個數(shù), 然后給第一個與上一行內(nèi)容不同的td其rowspan屬性附上正確的值即可, 為了能直觀的理解
效果如下
<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>
核心代碼:
// 這里寫成了一個jquery插件的形式
$('#process').mergeCell({
// 目前只有cols這么一個配置項, 用數(shù)組表示列的索引,從0開始
// 然后根據(jù)指定列來處理(合并)相同內(nèi)容單元格
cols: [0, 3]
});
下面看看這個小插件的完整代碼:
;(function($) {
// 看過jquery源碼就可以發(fā)現(xiàn)$.fn就是$.prototype, 只是為了兼容早期版本的插件
// 才保留了jQuery.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調(diào)試
// console.debug(cols[i]);
mergeCell($(this), cols[i]);
}
dispose($(this));
});
};
// 如果對javascript的closure和scope概念比較清楚, 這是個插件內(nèi)部使用的private方法
// 具體可以參考本人前一篇隨筆里介紹的那本書
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 存放單元格內(nèi)容
$table.data('col-rowspan', 1); // 存放計算的rowspan值 默認(rèn)為1
$table.data('col-td', $()); // 存放發(fā)現(xiàn)的第一個與前一行比較結(jié)果不同td(jQuery封裝過的), 默認(rèn)一個"空"的jquery對象
$table.data('trNum', $('tbody tr', $table).length); // 要處理表格的總行數(shù), 用于最后一行做特殊處理時進行判斷之用
// 我們對每一行數(shù)據(jù)進行"掃面"處理 關(guān)鍵是定位col-td, 和其對應(yīng)的rowspan
$('tbody tr', $table).each(function(index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
// 取出單元格的當(dāng)前內(nèi)容
var currentContent = $td.html();
// 第一次時走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行與當(dāng)前行內(nèi)容相同
if ($table.data('col-content') == currentContent) {
// 上一行與當(dāng)前行內(nèi)容相同則col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
// 值得注意的是 如果用了$td.remove()就會對其他列的處理造成影響
$td.hide();
// 最后一行的情況比較特殊一點
// 比如最后2行 td中的內(nèi)容是一樣的, 那么到最后一行就應(yīng)該把此時的col-td里保存的td設(shè)置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // 上一行與當(dāng)前行內(nèi)容不同
// col-rowspan默認(rèn)為1, 如果統(tǒng)計出的col-rowspan沒有變化, 不處理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存第一次出現(xiàn)不同內(nèi)容的td, 和其內(nèi)容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $td.html());
$table.data('col-rowspan', 1);
}
}
});
}
// 同樣是個private函數(shù) 清理內(nèi)存之用
function dispose($table) {
$table.removeData();
}
})(jQuery);
主要的說明在注釋里應(yīng)該都有了, 代碼的確比較簡單, 像有些地方還值得改進
•處理的table內(nèi)容是從tbody開始查找的, 如果沒有tbody, 那應(yīng)該給出個更通用化的方案
•for ( var i = cols.length - 1; cols[i] != undefined; i--)...如果表格數(shù)據(jù)量大, 處理的列也比較多, 這里不進行優(yōu)化會有造成瀏覽器線程阻塞的風(fēng)險, 可以考慮用setTimeout
•其他什么值得改進的, 我想應(yīng)該會不少的
原表格:
col0 | col1 | col2 | col3 |
SuZhou | 11111 | 22222 | SuZhouCity |
SuZhou | 33333 | 44444 | SuZhouCity |
SuZhou | 55555 | 66666 | SuZhouCity |
ShangHai | 77777 | 88888 | ShangHaiCity |
ShangHai | uuuuu | hhhhh | ShangHaiCity |
ShangHai | ggggg | ccccc | ShangHaiCity |
GuangZhou | ttttt | eeeee | GuangZhouCity |
GuangZhou | ppppp | qqqqq | GuangZhouCity |
處理之后的樣子:
col0 | col1 | col2 | col3 |
SuZhou | 11111 | 22222 | SuZhouCity |
33333 | 44444 | ||
55555 | 66666 | ||
ShangHai | 77777 | 88888 | ShangHaiCity |
uuuuu | hhhhh | ||
ggggg | ccccc | ||
GuangZhou | ttttt | eeeee | GuangZhouCity |
ppppp | qqqqq |
效果出來, 看上去比較簡單, 下面先看下頁面
復(fù)制代碼 代碼如下:
<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>
核心代碼:
復(fù)制代碼 代碼如下:
// 這里寫成了一個jquery插件的形式
$('#process').mergeCell({
// 目前只有cols這么一個配置項, 用數(shù)組表示列的索引,從0開始
// 然后根據(jù)指定列來處理(合并)相同內(nèi)容單元格
cols: [0, 3]
});
下面看看這個小插件的完整代碼:
復(fù)制代碼 代碼如下:
;(function($) {
// 看過jquery源碼就可以發(fā)現(xiàn)$.fn就是$.prototype, 只是為了兼容早期版本的插件
// 才保留了jQuery.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調(diào)試
// console.debug(cols[i]);
mergeCell($(this), cols[i]);
}
dispose($(this));
});
};
// 如果對javascript的closure和scope概念比較清楚, 這是個插件內(nèi)部使用的private方法
// 具體可以參考本人前一篇隨筆里介紹的那本書
function mergeCell($table, colIndex) {
$table.data('col-content', ''); // 存放單元格內(nèi)容
$table.data('col-rowspan', 1); // 存放計算的rowspan值 默認(rèn)為1
$table.data('col-td', $()); // 存放發(fā)現(xiàn)的第一個與前一行比較結(jié)果不同td(jQuery封裝過的), 默認(rèn)一個"空"的jquery對象
$table.data('trNum', $('tbody tr', $table).length); // 要處理表格的總行數(shù), 用于最后一行做特殊處理時進行判斷之用
// 我們對每一行數(shù)據(jù)進行"掃面"處理 關(guān)鍵是定位col-td, 和其對應(yīng)的rowspan
$('tbody tr', $table).each(function(index) {
// td:eq中的colIndex即列索引
var $td = $('td:eq(' + colIndex + ')', this);
// 取出單元格的當(dāng)前內(nèi)容
var currentContent = $td.html();
// 第一次時走此分支
if ($table.data('col-content') == '') {
$table.data('col-content', currentContent);
$table.data('col-td', $td);
} else {
// 上一行與當(dāng)前行內(nèi)容相同
if ($table.data('col-content') == currentContent) {
// 上一行與當(dāng)前行內(nèi)容相同則col-rowspan累加, 保存新值
var rowspan = $table.data('col-rowspan') + 1;
$table.data('col-rowspan', rowspan);
// 值得注意的是 如果用了$td.remove()就會對其他列的處理造成影響
$td.hide();
// 最后一行的情況比較特殊一點
// 比如最后2行 td中的內(nèi)容是一樣的, 那么到最后一行就應(yīng)該把此時的col-td里保存的td設(shè)置rowspan
if (++index == $table.data('trNum'))
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
} else { // 上一行與當(dāng)前行內(nèi)容不同
// col-rowspan默認(rèn)為1, 如果統(tǒng)計出的col-rowspan沒有變化, 不處理
if ($table.data('col-rowspan') != 1) {
$table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
}
// 保存第一次出現(xiàn)不同內(nèi)容的td, 和其內(nèi)容, 重置col-rowspan
$table.data('col-td', $td);
$table.data('col-content', $td.html());
$table.data('col-rowspan', 1);
}
}
});
}
// 同樣是個private函數(shù) 清理內(nèi)存之用
function dispose($table) {
$table.removeData();
}
})(jQuery);
主要的說明在注釋里應(yīng)該都有了, 代碼的確比較簡單, 像有些地方還值得改進
•處理的table內(nèi)容是從tbody開始查找的, 如果沒有tbody, 那應(yīng)該給出個更通用化的方案
•for ( var i = cols.length - 1; cols[i] != undefined; i--)...如果表格數(shù)據(jù)量大, 處理的列也比較多, 這里不進行優(yōu)化會有造成瀏覽器線程阻塞的風(fēng)險, 可以考慮用setTimeout
•其他什么值得改進的, 我想應(yīng)該會不少的
您可能感興趣的文章:
- JS與jQuery遍歷Table所有單元格內(nèi)容的方法
- 合并table相同單元格的jquery插件分享(很精簡)
- jQuery實現(xiàn)鼠標(biāo)雙擊Table單元格變成文本框及輸入內(nèi)容后更新到數(shù)據(jù)庫的方法
- 使用jQuery 操作table 完成單元格合并的實例
- jQuery獲取table行數(shù)并輸出單元格內(nèi)容的實現(xiàn)方法
- jQuery 選擇表格(table)里的行和列及改變簡單樣式
- 用Jquery選擇器計算table中的某一列某一行的合計
- jQuery操作checkbox選擇(list/table)
- jQuery實現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
- JS拖動選擇table里的單元格完整實例【基于jQuery】
相關(guān)文章
jQuery實時統(tǒng)計輸入框字?jǐn)?shù)及限制
這篇文章主要為大家詳細(xì)介紹了jQuery實時統(tǒng)計輸入框字?jǐn)?shù)及限制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2020-06-06jQuery插件Skippr實現(xiàn)焦點圖幻燈片特效
Skippr 是一個超級簡單的 jQuery 幻燈片插件。只是包括你的網(wǎng)頁中引入 jquery.skippr.css 和 jquery.skippr.js 文件就能使用了。Skippr 能夠自適應(yīng)窗口寬度,而且導(dǎo)航是獨特的條形導(dǎo)航。2015-04-04基于jquery的讓textarea自適應(yīng)高度的插件
jquery extension - auto height text area2010-08-08jQuery開源組件BootstrapValidator使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery開源組件BootstrapValidator的使用方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下2017-06-06jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果示例
這篇文章主要介紹了jQuery實現(xiàn)的仿百度,仿谷歌搜索下拉框效果,結(jié)合實例形式分析了基于jQuery的鼠標(biāo)事件響應(yīng)與頁面元素動態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12