Table行合并操作
此方法不可取，但几天心血 保留，已有新想法，稍后会出一个完善的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">
<head>
<title>Table 行合并操作</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../js/CarCube/jquery-1.10.2.min.js"></script>
<style>
* { margin:0; padding:0; outline:0; background:transparent;}
table { border-collapse:collapse; border-spacing:0; line-height:1.5; font-family:"微软雅黑"; font-size:14px; color:#666;}
.dn { display:none;} .bg_fec { background:#fec!important;}
.row_comb { cursor:pointer;}
.row_comb:hover { background:#EEF7FF!important;} .tab_list { border:1px solid #ccc; line-height:1.8;}
.tab_list th { padding:6px 10px; border:1px solid #ccc; background:#eee; text-align:center;}
.tab_list td { padding:6px 10px; border:1px solid #ccc; background:#f9f9f9; font-size:12px; font-family:"宋体"; text-align:center;}
.tab_list tr:nth-of-type(2n) td { background:#fefefe;}
</style>
</head> <body style="width:auto; min-width:0;">
<br /> <script>
$(function(){ $.tableMerger("#tab1");
}); $.tableMerger = function(tab){
var tab = $(tab),
col_sum = getColSum(tab.find("tr").eq(0)); //列总数量 if(col_sum === -1) {
console.log("无法获取合并行数");
return false;
} //Get total columns table
function getColSum(o){
var sum = -1,
tmp;
if (typeof o == "object" && o.length > 0) {
o = o.children();
sum = 0;
for(var i=0; i<o.length; i++) {
var tmp = o.eq(i).attr("colspan");
if (!isNaN(tmp)) {
sum += tmp*1;
} else {
++sum;
}
}
}
return sum;
} //Set data-colspan,data-rowspan value
function childData() {
var o = tab.find("tr").children("[rowspan], [colspan]"),
tmp = -1; for(var i=0; i<o.length; i++) {
tmp = o.eq(i).attr("rowspan");
if(!isNaN(tmp)) {
o.eq(i).attr("data-rowspan", tmp);
}
tmp = o.eq(i).attr("colspan")
if(!isNaN(tmp)) {
o.eq(i).attr("data-colspan", tmp);
}
}
}
childData(); tab.on("click", ".row_comb", function(){
var self = $(this),
comb_sum = self.attr("rowspan")*1,
self_par = self.parents("tr"),
self_tr = self_par.children(),
tmp; //Set rowspan value, child : 表示一个td/th节点
function setRowspanVal(child, isShow) {
var rowspan_val = child.attr("rowspan") * 1;
if (!isNaN(rowspan_val)) {
if (isShow == 2) { //Parent node show
child.attr("rowspan", rowspan_val + comb_sum - 1);
} else if(isShow == 1) { //Show
if (rowspan_val < comb_sum) {
child.attr("rowspan", child.attr("data-rowspan"));
} else {
child.attr("rowspan", rowspan_val + comb_sum - 1);
}
} else if (isShow == 0) { //Hide
if (rowspan_val <= comb_sum) {
child.attr("rowspan", 1);
} else {
child.attr("rowspan", rowspan_val - comb_sum + 1);
}
}
}
} if (comb_sum > 1) { //Hide merge row
for(var i=self_par.index()+1; i<self_par.index() + self.attr("data-rowspan")*1; i++) { //Hide nodes under row
tab.find("tr").eq(i).addClass("dn");
} //self.data("child", self_par.children(":gt("+ self.index() +")")); //Save remove the row child
for(var i=0; i<self_tr.length; i++) { //Set the row rowspan value
setRowspanVal(self_tr.eq(i), 0);
/*
if(i > self.index()) { //Remove the row child
self_tr.eq(i).remove()
}
*/
} //Total replace
/*
var tot_tr = tab.find("tr").eq(self_par.index() + self.attr("data-rowspan")*1 - 1).clone().children();
tot_tr.addClass("tab-mer-off");
self_par.append(tot_tr);
*/ if(self_tr.length < col_sum) { //Set parent node rowspan value
var tr_o = tab.find("tr"),
cur_tr_len; for(var n=0; n<col_sum - self_tr.length; n++) {
for(var i=self_par.index()-1; i>=0; i--) {
cur_tr_len = tr_o.eq(i).children().length;
if(cur_tr_len > self_tr.length + n) {
setRowspanVal(tr_o.eq(i).children().eq(cur_tr_len - self_tr.length - 1 - n), 0);
break;
}
}
}
} } else if (comb_sum == 1) { //Show merge row
if(self.index() != 0 && self_tr.eq(self.index()-1).attr("rowspan") == 1) {
alert("请先展开父级节点！")
return false;
} comb_sum = self.attr("data-rowspan") * 1; //Get Show row number for(var i=self_par.index()+1; i<self_par.index() + comb_sum; i++) { //Show nodes under row
var cur_tr = tab.find("tr").eq(i).children("[rowspan]");
tab.find("tr").eq(i).removeClass("dn");
for(var n=0; n<cur_tr.length; n++) {
cur_tr.eq(n).attr("rowspan", cur_tr.eq(n).attr("data-rowspan")); //Reset the next node rowspan value
}
} for(var i=0; i<self_tr.length; i++) { //Set current row rowspan value
setRowspanVal(self_tr.eq(i), 1);
} /*
var tmp_child = self.data("child");
for(var i=0; i<tmp_child.length; i++) {
tmp_child.eq(i).attr("rowspan", tmp_child.eq(i).attr("data-rowspan"));
console.log("\n"+tmp_child.eq(i).attr("rowspan"))
}
*/ //Total replace
/*
self_par.find(".tab-mer-off").remove();
self_par.append(tmp_child);
*/ if(self_tr.length < col_sum) { //Set parent node rowspan value
var tr_o = tab.find("tr"),
cur_tr_len; for(var n=0; n<col_sum - self_tr.length; n++) {
for(var i=self_par.index()-1; i>=0; i--) {
cur_tr_len = tr_o.eq(i).children().length;
if(cur_tr_len > self_tr.length + n) {
setRowspanVal(tr_o.eq(i).children().eq(cur_tr_len - self_tr.length -1 - n), 2);
break;
}
}
}
} } });
}
</script> <table id="tab1" class="tab_list" width="90%" style="margin:0 auto;">
<tr>
<td class="row_comb" rowspan="12">一级</td>
<td class="row_comb" rowspan="6">二级</td>
<td class="row_comb" rowspan="3">三级</td>
<td>1</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>2</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>3</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="row_comb" rowspan="3">三级</td>
<td>4</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>5</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>6</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="row_comb" rowspan="6">二级</td>
<td class="row_comb" rowspan="3">三级</td>
<td>7</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>8</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>9</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td class="row_comb" rowspan="3">三级</td>
<td>10</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>11</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>12</td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
<br /> </body>
</html>
Table行合并操作的更多相关文章
- iView学习笔记(二)：Table行编辑操作
1.前端准备工作 首先新建一个项目,然后引入iView插件,配置好router npm安装iView npm install iview --save cnpm install iview --sav ...
- bootstrap-table 行合并和列合并,以及固定列宽度等问题
列合并和列宽度固定: .setWidth { table-layout: fixed; } .setWidth > thead > tr > th { width: 80px; } ...
- 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。
前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...
- Js 合并 table 行 的实现方法
Js 合并 table 行 的实现方法 需求如下: 某公司的员工档案,如下, 经理看员工的信息不是很清晰: 姓名 所在学校 毕业时间 张三 小学 2000 张三 中学 2006 张三 大学 2010 ...
- knockoutjs+jquery.gridgroup 实现table数据加载和行合并
目标 使用ajax获取到json数据后,通过ko绑定到表格,然后通过jquery.gridgroup插件实现行合并,效果如下: 步骤 1.引入插件 <script src="~/Scr ...
- Java利用poi生成word(包含插入图片，动态表格，行合并)
转(小改): Java利用poi生成word(包含插入图片,动态表格,行合并) 2018年12月20日 09:06:51 wjw_11093010 阅读数:70 Java利用poi生成word(包含插 ...
- LSM树——LSM 将B+树等结构昂贵的随机IO变的更快，而代价就是读操作要处理大量的索引文件(sstable)而不是一个，另外还是一些IO被合并操作消耗。
Basic Compaction 为了保持LSM的读操作相对较快,维护并减少sstable文件的个数是很重要的,所以让我们更深入的看一下合并操作.这个过程有一点儿像一般垃圾回收算法. 当一定数量的ss ...
- [转]Mysql命令行常用操作
Mysql命令行常用操作 一.从命令行登录MySQL数据库服务器 1.登录使用默认3306端口的MySQL /usr/local/mysql/bin/mysql -u root -p 2.通过TCP连 ...
- mysql 多行合并一列
mysql 多行合并一列 使用的函数为: GROUP_CONCAT(exp) 其中exp 的参数类似如下: (field order by field desc separator ';') ...
随机推荐
- Java 吃货联盟
import java.util.Scanner; public class Shao { private static final int[] dishNames = null; private ...
- [Shell]grep命令
我是好文章的搬运工,原文来自ChinaUnix,博主scq2099yt,地址:http://blog.chinaunix.net/uid-22312037-id-4217835.html 一.基本用法 ...
- BZOJ_3529_[Sdoi2014]数表_莫比乌斯反演+树状数组
Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...
- bzoj 3230 相似子串 —— 后缀数组+二分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=3230 先算出每个后缀贡献子串的区间: 然后前缀LCP直接查询,后缀LCP二分长度,查询即可: ...
- [poj3417]Network(LCA+树形dp)
题意:给出一棵无根树,然后下面再给出m条边,把这m条边连上,每次你去两条边,规定一条是树边,一条是新边,问有多少种方案能使树断裂. 解题关键:边权转化为点权,记录每条边被环覆盖的次数,通过val[a] ...
- UVa 11552 Fewest Flops (DP)
题意:给一个字符串,把它分为k块,每一块里面的字母可以任意的排序.最终字符串, 连续的一样的字母算作一个chunk,问总chunks最少是多少? 析:dp[i][j] 表示第 i 个块,第 j 位在末 ...
- linux jar 后台运行
在linux系统中可以利用nohup来执行任何命令,并把命令自动调到linux后台运行,不锁定当前ssh窗口,也不会被ctrl + c,alt + F4之类打断程序的动行.如: nohup java ...
- Spring Data JPA stackoverflow
1.禁止使用lombok 的@Data 注释 使用@Data注释后,默认会重写父类的toString()方法,hashcode()等方法,在往map里存的时候,会根据equals和hashcode方法 ...
- JAVA企业级开发-jdbc事务，数据库连接池(10)
一. JDBC事务 事务: 问题1.什么是事务 问题2.java中(jdbc)如何控制事务 1. 事务—重点 指的的逻辑上的一组(一组sql,insert update ,delete)操作,组成 ...
- SPFA（热浪）
1557 热浪 时间限制: 1 s 空间限制: 256000 KB 题目等级 : 钻石 Diamond 题解 查看运行结果