关于页面中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 ...
随机推荐
- Codeforces 699D Fix a Tree 并查集
原题:http://codeforces.com/contest/699/problem/D 题目中所描述的从属关系,可以看作是一个一个块,可以用并查集来维护这个森林.这些从属关系中会有两种环,第一种 ...
- PHP使用数组依次替换字符串中匹配项
select * from table where ctime >= '[date-14]' and ctime <= '[date-1]'; 想把上面这句sql的中括号表示的日期依次换成 ...
- winform窗体弹出时，光标默认显示在指定的输入框内
private void Form1_Paint(object sender, PaintEventArgs e) { this.textBox1.SelectAll(); this.textBox1 ...
- at 常用命令
以debian 6.0.1 为例: 服务开启关闭: Usage: /etc/init.d/atd {start|stop|restart|force-reload|status} 设置一次计划任务(a ...
- JS判断是否是微信页面，判断手机操作系统（ios或android）并跳转到不同下载页面
JS判断客户端是否是iOS或者Android 参考:http://caibaojian.com/browser-ios-or-android.html function is_weixin() { v ...
- iOS - 使用自定义字体-苹方字体
苹方提供了六个字重,font-family 定义如下:苹方-简 常规体font-family: PingFangSC-Regular, sans-serif;苹方-简 极细体font-family: ...
- NYOJ题目27水池数目
--------------------------------------------- 这道题有点坑,也怪我总是有点马虎,按照正常人的思维0是表示有水池啊竟然是1表示有水池,最坑的是写反了竟然还能 ...
- Linux常用命令学习2---（文件搜索命令locate find、命令搜索命令whereis which、字符串搜索命令grep、帮助命令man）
1.文件搜索命令:locate [文件名] 在后台数据库中按文件名搜索,搜索速度比find快,耗费资源更少 例子:locate test.txt,就会显示文件名包含 test.txt的所 ...
- Google之Chromium浏览器源码学习——base公共通用库(四)
本文将介绍debug调试相关的内容,包括调试器.性能分析.堆跟踪.跟踪事件等: alias.h:Alias函数,提供防止载微软的编译器优化某参数变量的操作,内部通过#pragma optimize(& ...
- Jetty官方文档翻译
最近在学习Jetty,没有找到合适的资料,所有只能看官方文档了,但是只有英文的,想着自己翻译着学也是学还不如把学习的过程放到网上,也可以给需要的人看,英文水平毕竟有限,也是用有道翻译着来的,不过也加了 ...