关于页面中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 ...
随机推荐
- Linux上进行单片机开发
linux上可以使用sdcc进行单片机开发 ubuntu使用 apt-get install sdcc 即可安装. 附一个比较通用的Makefile PRJ := test SRC := $(wild ...
- 如何用angularjs给从后台传来数据添加链接
<!DOCTYPE html> <html ng-app="myApp"> <head> <meta charset="UTF- ...
- 上个项目的一些反思 I
最近一直在反思之前的项目,发现了很多问题.比如数据安全... 虽然项目需求是只展示最新的数据,所以几乎没用什么本地存储.除了通讯录和用户的Token. 用户通讯录另表,今天反思下用户的Token的存储 ...
- Ubuntu远程vnc配置
1. 安装xrdp 使用快捷键"Ctrl+Alt+T"打开一个终端窗口,输入"sudo apt-get install xrdp"-->回车-->输 ...
- tornado 重定向404（方法不对）
application = tornado.web.Application(url_wrapper([ (r"", include('app.views.web_services. ...
- poj 并查集
http://poj.org/problem?id=1611 水题 题意:就是找一共有多少个人感染了,0是感染学生的编号. #include <stdio.h> #include < ...
- jquery ajax 请求参数详细说明 及 实例
url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...
- Odoo中最小库存规则和按订单生成规则的区别
---恢复内容开始--- 最小库存规则(Minimum stock rule)用来保证你的库存产品数量总是不会低于设定的最小库存数量.用来保证产品生产和回到客户的需求.当库存产品低于这个最小库存数量时 ...
- CodeTimerPerformance EasyPerformanceCounterHelper .NET 4.5
//#define NET35 namespace TestConsoleApplication { using System; using System.Diagnostics; using Sys ...
- threadid=1: thread exiting with uncaught exception (group=0xb2a86d70)
这个错误是程序运行成功,但是一在虚拟机上运行就报“停止运行了”,如图: 然后我们查看一个日志信息: 查了好久,终于 搞好了,原因是安卓目标SDK版本太高了,我这里创建好默认是这样的如图: 只要把21改 ...