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 ';') ...
随机推荐
- Zabbix监控华为交换机
一. 监控交换机首先要在交换机开通snmp协议. 有两种方式开通,web界面,及交换机的配置界面 Web界面开通: 交换机配置界面 有web界面的,使用web界面相对简单,本项目就是用web界面 ...
- listen 67
Pay What You Want May Deter Consumers Music, film and video game makers face a new online, digital w ...
- python 之生成器
斐波拉契数列: In [31]: def func(times): ...: alist = [0,1] ...: sum = 0 ...: for i in range(times): ...: . ...
- 「HNOI2008」「LuoguP3197」越狱（数论
题目描述 原题来自:HNOI 2008 监狱有连续编号为 111 到 nnn 的 nnn 个房间,每个房间关押一个犯人.有 mmm 种宗教,每个犯人可能信仰其中一种.如果相邻房间的犯人信仰的宗教相同, ...
- 五 Vue学习 首页学习 (上）
首页: http://localhost:8002/#/, 登录页面如下: index.js文件中如下的路由配置,转过去看login.vue是如何实现的. const routes = [ { ...
- Django ORM 那些相关操作
Django ORM 那些相关操作 一般操作 必知必会13条 <> all(): #查询所有的结果 <> filter(**kwargs) # 它包含了与所给筛选条件相匹配的对 ...
- HDU - 5534 Partial Tree（每种都装的完全背包）
Partial Tree In mathematics, and more specifically in graph theory, a tree is an undirected graph in ...
- 2018上海大都会 J-Beautiful Numbers（数位dp-模未知）
J-Beautiful Numbers 链接:https://www.nowcoder.com/acm/contest/163/J 来源:牛客网 时间限制:C/C++ 8秒,其他语言16秒 空间限制: ...
- HDU - 1078 FatMouse and Cheese（记忆化+dfs）
FatMouse and Cheese FatMouse has stored some cheese in a city. The city can be considered as a squar ...
- 解码H264文件的一些基础知识
这段时间一直在进行编写H264文件的解析类,因此对于H264文件的格式有了初步的了解,官方文档也看了个大概.这篇文章主要是总结了一些为解码H264文件而需要的一些前期知识,话不多说,下面是干货,有些是 ...