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 ';') ...
随机推荐
- SpringBoot_01_正确、安全地停止SpringBoot应用服务
二.参考资料 1.正确.安全地停止SpringBoot应用服务
- xpath normalize-sapce 函数的Java实现
normalize-space函数实现的功能是:删除字符串前后空格,中间的空格有多个只保留一个. 1. 用Java正则表达式 public static String normalizeSpace(S ...
- java-05 面向对象
class StudentDemo { String name; int age; String address; public void study(){ System.out.println(&q ...
- iOS UINavgationController、 UINavigationBar、 UINavigationItem关系分析
一般导航控制器含有4个对象,UINavigationController.UINavigationBar.UIViewController.UINavigationItem. 1:UINavigati ...
- hdu3518 Boring Counting[后缀排序]
裸的统计不同的重复出现子串(不重叠)种数的题.多次使用后缀排序要注意小细节.y数组在重复使用时一定要清空,看那个line25 +k就明白了 ,cnt也要清空,为什么就不说了 #include<b ...
- 重学JAVA基础(三):动态代理
1.接口 public interface Hello { public void sayHello(); } 2.实例类 public class Hello2 { public void sayH ...
- jquery/原生js/css3 实现瀑布流以及下拉底部加载
思路: style: <style type="text/css"> body,html{ margin:; padding:; } #container{ posit ...
- 在VMWare上安装ubuntu及VMWare&nbs…
在VMWare上安装ubuntu及VMWare Tools 一.摘要 该文主要介绍了如何在虚拟机上安装ubuntu,和安装VMWare Tools设置共享文件夹,最后对ubuntu做了简单的介绍. 二 ...
- Spring入门第十八课
Spring AOP AspectJ:Java社区里最完整最流行的AOP框架 在Spring2.0以上的版本中,可以使用基于AspectJ注解或者基于XML配置的AOP 看代码: package lo ...
- 利用CSS3给图片添加旋转背景特效
首先看旋转特效:http://***/demo/201512/2015-12-09-css3-image-hover-animate/index.html 这是一款纯CSS3实现的当鼠标滑过图片时文字 ...