jQuery合并单元格以及还原重置
一、合并rowspan
jQuery.fn.rowspan = function(colIdx) {
return this.each(function(){
var that;
$('tr', this).each(function(row) {
$('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
if (that!=null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan",1);
rowspan = $(that).attr("rowSpan"); }
rowspan = Number(rowspan)+1;
$(that).attr("rowSpan",rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
} 使用方法:$("#tableId").rowspan(0); // 第0列上下一样的数据将合并
二、合并后还原
jQuery.fn.ResetTable=function(){
$("tr",this).each(function(trindex,tritem){
$(tritem).find("td").each(function(tdindex,tditem){
var Rcount=$(tditem).attr("rowspan");
var Ccount=$(tditem).attr("colspan");
var newtd="<td class='Ctd'>"+$(tditem).text()+"</td>";
if(Rcount>1){
var parent=$(tditem).parent("tr")[0];
while(Rcount >1){
$(parent).next().find("td").eq(tdindex).before(newtd);
parent=$(parent).next();
Rcount--;
}
$(tditem).removeAttr("rowspan");
} if(Ccount>1){
while(Ccount>1){
$(tditem).after(newtd);
Ccount--;
}
$(tditem).removeAttr("colspan");
} }); });
} 使用方法: $("#tableId").ResetTable();
jQuery合并单元格以及还原重置的更多相关文章
- 【Web】jquery合并单元格
合并单元格的情况,在开发中还是比较多见的,以下仅介绍合并行的情况. 原来的table效果 效果如下: 代码如下: <!DOCTYPE html> <html xmlns=" ...
- jquery操作表格 合并单元格
jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...
- 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格
jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...
- JQuery EasyUI DataGrid动态合并单元格
/** * EasyUI DataGrid根据字段动态合并单元格 * @param fldList 要合并table的id * @param fldList ...
- NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析
我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...
- DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)
直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...
- 【Javascript】Javascript横向/纵向合并单元格TD
> 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1 JOB TO ...
- easyUI----纵向合并单元格
使用Easyui-DataGrid过程用.做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法. 解决方案: 代码一 onLoadSuccess: f ...
- BootStrap Table 合并单元格
为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...
随机推荐
- C++ socket网络爬虫(1)
C++写的socket网络爬虫,代码会在最后一次讲解中提供给大家,同时我也会在写的同时不断的对代码进行完善与修改 我首先向大家讲解如何将网页中的内容,文本,图片等下载到电脑中. 我会教大家如何将百度首 ...
- js+Canvas 利用js 实现浏览器保存图片到本地
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- vue中的数据双向绑定
学习的过程是漫长的,只有坚持不懈才能到达到自己的目标. 1.vue中数据的双向绑定采用的时候,数据劫持的模式.其实主要是用了Es5中的Object.defineProperty;来劫持每个属性的get ...
- Java-JDBC.mysql 工具类 读取本地文件配置
引用 mysql-connector-jav 的jar 配置文件为 database.propertties . 格式如下 driverClass=com.mysql.jdbc.Driver ur ...
- SpringBoot(四)_Spring Data JPA的使用
JPA 绝对是简化数据库操作的一大利器. 概念 首先了解 JPA 是什么? JPA(Java Persistence API)是 Sun 官方提出的 Java 持久化规范.它为 Java 开发人员提供 ...
- 01 Spring Boot 的简单配置和使用
Spring Boot 简介 使用 Spring Boot 可以让我们快速创建一个基于 Spring 的项目,而让这个 Spring 项目跑起来我们只需要很少的配置就可以了. 创建 Spring Bo ...
- BeautifulSoup的find()和findAll()
BeautifulSoup的提供了两个超级好用的方法(可能是你用bs方法中最常用的).借助这两个函数,你可以通过表现的不同属性轻松过滤HTML(XML)文件,查找需要的标签组或单个标签. 首先find ...
- tarjan解决路径询问问题
好久没更新了,就更一篇普及组内容好了. 首先我们考虑如何用tarjan离线求出lca,伪代码大致如下: def tarjan(x): 将x标记为已访问 for c in x的孩子: tarjan(c) ...
- Typhoon-v1.02 靶机入侵
0x01 前言 Typhoon VM包含多个漏洞和配置错误.Typhoon可用于测试网络服务中的漏洞,配置错误,易受攻击的Web应用程序,密码破解攻击,权限提升攻击,后期利用步骤,信息收集和DNS ...
- 搭建ELK收集Nginx日志
众所周知,ELK是日志收集套装,这里就不多做介绍了. 画了一个粗略的架构图,如下: 这里实际用了三个节点,系统版本为CentOS6.6,ES版本为2.3.5,logstash版本为2.4.0,kiba ...