一、合并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合并单元格以及还原重置的更多相关文章

  1. 【Web】jquery合并单元格

    合并单元格的情况,在开发中还是比较多见的,以下仅介绍合并行的情况. 原来的table效果 效果如下: 代码如下: <!DOCTYPE html> <html xmlns=" ...

  2. jquery操作表格 合并单元格

    jquery操作table,合并单元格,合并相同的行 合并的方法 $("#tableid").mergeCell({ cols:[X,X] ///参数为要合并的列}) /** * ...

  3. 雷林鹏分享:jQuery EasyUI 数据网格 - 合并单元格

    jQuery EasyUI 数据网格 - 合并单元格 数据网格(datagrid)经常需要合并一些单元格.本教程将向您展示如何在数据网格(datagrid)中合并单元格. 为了合并数据网格(datag ...

  4. JQuery EasyUI DataGrid动态合并单元格

    /**        * EasyUI DataGrid根据字段动态合并单元格        * @param fldList 要合并table的id        * @param fldList ...

  5. NPOI操作EXCEL(五)——含合并单元格复杂表头的EXCEL解析

    我们在第三篇文章中谈到了那些非常反人类的excel模板,博主为了养家糊口,也玩命做出了相应的解析方法... 我们先来看看第一类复杂表头: ...... 博主称这类excel模板为略复杂表头模板(蓝色部 ...

  6. DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)

    直接上代码,原理之前的随笔已经讲过了.http://www.cnblogs.com/hdwang/p/7115835.html 1.先看看效果 2.html代码,含js代码 2.1 common.js ...

  7. 【Javascript】Javascript横向/纵向合并单元格TD

    > 需求是这样滴(>_<) 在报表系统中,涉及“HTML的TD单元格的合并”恐怕为数不少. 比如,从DB查得数据并经过后台的整理后,可能是这样的: Table1     JOB TO ...

  8. easyUI----纵向合并单元格

    使用Easyui-DataGrid过程用.做统计/报表等时经常会使用到合并单元格,原生态Easyui-DataGrid没有合并单元格的属性或方法. 解决方案: 代码一 onLoadSuccess: f ...

  9. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

随机推荐

  1. [建树(非二叉树)] 1090. Highest Price in Supply Chain (25)

    1090. Highest Price in Supply Chain (25) A supply chain is a network of retailers(零售商), distributors ...

  2. Internet History, Technology and Security (Week 7)

    Week 7 Technology: Application Protocols Welcome to Week 7 of IHTS. This week has less material than ...

  3. #Leetcode# 707. Design Linked List

    https://leetcode.com/problems/design-linked-list/ Design your implementation of the linked list. You ...

  4. BZOJ5323 JXOI2018游戏(线性筛+组合数学)

    可以发现这个过程非常类似埃氏筛,将在该区间内没有约数的数定义为质数,那么也就是求每种方案中选完所有质数的最早时间之和. 于是先求出上述定义中的质数个数,线性筛即可.然后对每个最短时间求方案数,非常显然 ...

  5. 一种KEIL中定义过的变量在使用中提示未定义的情况

    [环境] > KEIL5.25 > win10 > @2018-4-23 [问题] 头文件互包含导致的错误(使用了另一文件的类型定义) 文件<fileA.h> <f ...

  6. centos下安装ngnix+php+mysql服务

    一.nginx 安装 1.查看yum下nginx版本信息 [root@localhost ~]# yum list | grep nginx 2.手动添加nginx的yum仓库 [root@local ...

  7. ButterKnife注入注解框架用法

    Android 依赖注入 ButterKnife 基本使用 - 渐行渐远渐无声 - 博客园http://www.cnblogs.com/fansen/p/5653887.html ButterKnif ...

  8. 解题:CF949D Curfew

    题面 整体的思路就是在均摊每个宿舍的人数,注意一个人可以跑好几次=.= 可以发现多的学生往中间跑一定能跑过宿管,所以只考虑学生们能不能及时跑到人不够的宿舍.对两边记录两个已经满足要求的宿舍,然后用前/ ...

  9. BZOJ 3505 [Cqoi2014]数三角形

    3505: [Cqoi2014]数三角形 Description 给定一个nxm的网格,请计算三点都在格点上的三角形共有多少个.下图为4x4的网格上的一个三角形.注意三角形的三点不能共线. Input ...

  10. python的字符串截取

    str = ‘’ :] #截取第一位到第三位的字符 print str[:] #截取字符串的全部字符 :] #截取第七个字符到结尾 ] #截取从头开始到倒数第三个字符之前 ] #截取第三个字符 ] # ...