关于页面中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 ...
随机推荐
- HDU 4946 Area of Mushroom（构造凸包）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4946 题目大意:在一个平面上有n个点p1,p2,p3,p4....pn,每个点可以以v的速度在平面上移 ...
- python 字典的函数
clear(),清空 注意单纯的赋值就相当于c语言中引用,只事额外起了一个别名,所以他们指向相同的地址, 所以令c={},只是另外开辟了一个新的空间让c为空,并没有改变之前的空间,所以{}与clear ...
- python3简单爬虫
最近在抽空学了一下python,于量就拿爬是练了下手,不得不说python的上手非常简单.在网上找了一下,大都是python2的帖子,于是随手写了个python3的.代码非常简单就不解释了,直接贴代码 ...
- Shell 编程 : 数值，字符，字符串
数值运算命令 expr 命令 expr expression expression 是由字符串 以及 运算符所组成的,每一个字符串或说运算符之间必须用空格隔开, 运算符的优 ...
- SpringMVC学习（二）
SpringMVC入门(注解方式) 需求 实现商品查询列表功能. 第一步:创建Web项目 springmvc02 第二步:导入jar包 第三步:配置前端控制器 在WEB-INF\web.xml中配置前 ...
- [LeetCode] Reverse Linked List
Reverse a singly linked list. 这题因为palindrome linked list 的时候需要就顺便做了一下.利用三个指针:prev, now, next 相互倒腾就行. ...
- 安装mcrypt
Mcrypt扩展是 mcrypt 库的接口,mcrypt 库提供了对多种块算法的支持. 安装mcrypt之前请确认已经安装yum install gcc php-devel 执行命令:yum upda ...
- Structs框架
一.准备工作及实例 1.解压struts-2.1.6-all.zip(structs网上下载) apps目录:struts2自带的例子程序 docs目录:官方文档. lib 目录:存放所有jar文件. ...
- Java数组技巧攻略
Java数组技巧攻略 0. 声明一个数组(Declare an array) String[] aArray = new String[5]; String[] bArray = {" ...
- psql-09表:视图和索引
视图 由查询语句定义的虚拟表;从视图中看到的数据可能来自数据库中的一张或多张表,也可能来自外部; 使用视图的原因一般有: 使复制的查询易于理解和使用; 安全原因; 表一些函数返回的结果映射成视图; 一 ...