关于页面中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 ...
随机推荐
- 读取70开头的xml,gbk转成utf-8
//读取70开头的xml,gbk转成utf-8 //InputStream is = new FileInputStream(super.getFile());//文件读取 //InputStream ...
- Android下如何计算两经纬点之间距离
节选自百度地图API: 若开发者使用的是百度地图或定位API,且版本在1.3.5以后的, 路线规划提供了获取路线距离的方法,见MKRoutePlan 类的 getDistance 方法. 如果是计算任 ...
- iOS开发——高级篇——远程音频、视频播放
一.远程音频播放(<AVFoundation/AVFoundation.h>) #import <AVFoundation/AVFoundation.h> /** 播放器 */ ...
- Java连接mysql数据库并插入中文数据显示乱码
连接数据库设置编码 jdbc:mysql://地址:3306/数据库名?characterEncoding=utf8
- jquery-创建弹出框原理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- PHPStorm XDebug的安装
环境: 我的系统: 4.4.0-43-generic #63-Ubuntu SMP Wed Oct 12 13:48:03 UTC 2016 x86_64 x86_64 x86_64 GNU/Linu ...
- tp5 中 model 的查询方法
实例化模型后调用查询方法,可以写任何想要的查询(推荐) public function select(){ $user = model('User'); $data = $user -> ) - ...
- iOS - 模拟器
模拟器分为ipad模拟器和iphone模拟器,尺寸都是固定的,就是320*480(iphone),640*960(iphone高清)1024*768(ipad),目前这个尺寸是不能调的.
- linux下使用automake工具自动生成makefile文件
linux环境下,当项目工程很大的时候,编译的过程很复杂,所以需要使用make工具,自动进行编译安装,但是手写makefile文件比较复杂,所幸在GNU的计划中,设计出了一种叫做Autoconf/Au ...
- 算法系列：kmp
作者: 阮一峰 日期: 2013年5月 1日 字符串匹配是计算机的基本任务之一. 举例来说,有一个字符串"BBC ABCDAB ABCDABCDABDE",我想知道,里面是否包含另 ...