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 新特性

代码格式化

每日一句

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

最新文章

本站公众号

欢迎关注本站公众号,获取更多信息

相关文章

>>更多相关文章<<