关于页面中table中相同的列自动合并
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title> <script type="text/javascript" src="C:/Users/xqq/Desktop/Study/jquery/jquery.min.js"></script> <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); $(function() {
$('#process').mergeCell({
cols: [0,2]
});
});
</script> </head> <body>
<table id="process" cellpadding="2" cellspacing="0" border="1">
<thead>
<tr>
<th>终端名称</th>
<th>业务类型</th>
<th>支付方式</th>
<th>交易笔数</th>
<th>交易金额（元）</th>
<th>退款笔数</th>
<th>退款金额（元）</th>
</tr>
</thead>
<tbody>
<tr>
<td>***001</td>
<td>挂号</td>
<td>银行卡支付</td>
<td>4</td>
<td>17.20</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***001</td>
<td>充值</td>
<td>银行卡支付</td>
<td>10</td>
<td>3406</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***001</td>
<td>处方</td>
<td>银行卡支付</td>
<td>5</td>
<td>813.01</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***002</td>
<td>挂号</td>
<td>银行卡支付</td>
<td>1</td>
<td>8.80</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***002</td>
<td>充值</td>
<td>银行卡支付</td>
<td>13</td>
<td>3280</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***002</td>
<td>处方</td>
<td>银行卡支付</td>
<td>6</td>
<td>3346.56</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***003</td>
<td>处方</td>
<td>银行卡支付</td>
<td>1</td>
<td>116</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***003</td>
<td>挂号</td>
<td>银行卡支付</td>
<td>1</td>
<td>5.80</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***004</td>
<td>挂号</td>
<td>银行卡支付</td>
<td>3</td>
<td>17.40</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***004</td>
<td>充值</td>
<td>银行卡支付</td>
<td>10</td>
<td>2397</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***004</td>
<td>处方</td>
<td>银行卡支付</td>
<td>3</td>
<td>709.28</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***005</td>
<td>处方</td>
<td>银行卡支付</td>
<td>2</td>
<td>437.87</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***005</td>
<td>充值</td>
<td>银行卡支付</td>
<td>4</td>
<td>1600</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***007</td>
<td>充值</td>
<td>银行卡支付</td>
<td>8</td>
<td>2351</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***007</td>
<td>挂号</td>
<td>银行卡支付</td>
<td>4</td>
<td>20.20</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***007</td>
<td>处方</td>
<td>银行卡支付</td>
<td>5</td>
<td>549.12</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***008</td>
<td>充值</td>
<td>银行卡支付</td>
<td>5</td>
<td>6311</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***008</td>
<td>处方</td>
<td>银行卡支付</td>
<td>9</td>
<td>2091.63</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***008</td>
<td>挂号</td>
<td>银行卡支付</td>
<td>1</td>
<td>5.80</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***009</td>
<td>处方</td>
<td>银行卡支付</td>
<td>2</td>
<td>1142.03</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***009</td>
<td>充值</td>
<td>银行卡支付</td>
<td>1</td>
<td>60</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***014</td>
<td>处方</td>
<td>银行卡支付</td>
<td>1</td>
<td>422.11</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>***015</td>
<td>处方</td>
<td>银行卡支付</td>
<td>1</td>
<td>268.70</td>
<td>0</td>
<td>0</td>
</tr>
<tr>
<td>合计 总机器数:10</td>
<td>全部</td>
<td></td>
<td>100</td>
<td>29376.51</td>
<td>0</td>
<td>0.00</td>
</tr>
</tbody> </table> </body>
</html>
关于页面中table中相同的列自动合并的更多相关文章
- excel poi 文件导出，支持多sheet、多列自动合并。
参考博客: http://www.oschina.net/code/snippet_565430_15074 增加了多sheet,多列的自动合并. 修改了部分过时方法和导出逻辑. 优化了标题,导出信息 ...
- layui中table表格的操作列（删除，编辑）等按钮的操作
暂停和中止按钮功能 if (obj.event === 'del') { layer.confirm('确认中止么', function (index) { $.ajax({ type: " ...
- 【2017-06-29】在登录页面自动返回上次请求页面、Js获取table中的行数与列数
一.在登录页面自动返回上次请求页面 Request.UrlReferrer比如 if (Request.UrlReferrer != null) { //如果能获取来路地址 Response.Redi ...
- Java&Selenium处理页面Table以及Table中随机位置的数据
一.摘要 前一段时间公司小伙伴刚刚接触自动化,遇到的一个问题,页面新创建的数据保存后,出现在table中的某个位置,并不一定是第一行还是第几行,这种情况下如何去操控它 本篇博文将介绍处理这个问题的一种 ...
- bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- JavaScript实现获取table中某一列的值
JavaScript实现获取table中某一列的值 1.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...
- MySQL 建表语句 create table 中的列定义
MySQL 建表语句 create table 中的列定义: column_definition: data_type [NOT NULL | NULL] [DEFAULT default_value ...
- table中超过长度的列，显示省略号
<style type="text/css"> .table-ellipsis { table-layout: fixed; width: 100%; } .table ...
随机推荐
- SVN版本库（访问权限）配置实例笔记
http://blog.csdn.net/zjianbo/article/details/8578297 SVN版本库(访问权限)配置实例笔记 本系列文章由ex_net(张建波)编写,转载请注明出处. ...
- 时下手机和p2p理财的共同点
1, 雨后春笋,百家争鸣:一会听说这个又做手机了,一会听说哪哪哪又搞了个P2P. 2, 性价比高的都得靠抢:手机配置高价格低的要抢:p2p利率高时间短的要抢. 3, 竞争惨烈:手机千元机各种血拼:P2 ...
- 我常用的grep命令
查找包含某个字符的行并保存在文件 grep -rn 'test' ./*.sql >test.sql -r 是递归查找 -n 是显示行号 在当前目录下的.sql结尾的文件中查找包含 test 字 ...
- iOS开发UI篇—核心动画(转场动画和组动画)
转自:http://www.cnblogs.com/wendingding/p/3801454.html iOS开发UI篇—核心动画(转场动画和组动画) 一.转场动画简单介绍 CAAnimation的 ...
- hadoop 笔记
我们常说的分布式系统,其实就是分布式软件系统,支持分布式处理的软件系统.他是在通信网络互联的多处理机体系结构上执行任务. hadoop是分布式软件系统中文件系统层的软件,他实现了分布式文件系统和部 ...
- php 总结第一篇（望大家补充！谢谢）
/* 数组的常用函数 * * 数组的排序函数 * sort() * rsort() * usort() * asort() * arsort() * uasort() * ...
- QT error: cannot find -lGL
自己电脑新搭建的QT5.4.2编程环境,编译的第一个程序出现错误:error: cannot find -lGL 经查证,是找不到GL库,解决办法: sudo apt-get install libg ...
- JDK自带工具列表
JDK是一个功能强大的Java开发套装,它不仅仅为我们提供了Java运行环境,还给开发人员提供了许多有用的开发组件(位于bin目录中,如下图所示).仅仅使用JDK,就能够解决我们在Java开发过程中遇 ...
- [Android]电话拨号器开发
继续今天的Android,经过昨天大体了解了Android开发的一些基本文件结构,今天来做一个电话拨号器! 预期达到的效果 实现过程 首先还是按照昨天第一篇教程,新建一个项目叫PhoneCall的An ...
- jquery 使用需要注意
jquery选择器,层选择器等多个选择器,jquery生成对象,jquery遍历对象, jquery ajax调用不要进行方法封装返回值方式调用,会取不到值. jquery使用要注意很多细节点才能将其 ...