文档章节

jquery实现行和列分步单元格合并

wenwen1
 wenwen1
发布于 2014/04/30 11:10
字数 624
阅读 4688
收藏 7

//-----------上下单元格合并--------------------

 jQuery.fn.rowspan = function(colIdx) {

 return this.each(function(){

  var that;

  $('tr', this).each(function(row) {

  $('td:eq('+colIdx+')', this).each(function(col) {

      if ($(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); // do your action for the colspan cell here

        $(this).hide(); // .remove(); // do your action for the old cell here

      } else {

        that = this;

      }

      that = (that == null) ? this : that; // set the that if not already set

  });

 });


 });

}

//-----------左右单元格合并--------------------

jQuery.fn.colspan = function(rowIdx) {

 return this.each(function(){


  var that;

  $('tr', this).filter(":eq("+rowIdx+")").each(function(row) {

  $(this).find('td').each(function(col) {

 /*  alert($(this).text()!=""); */

      if ($(this).html() == $(that).html()) {

        colspan = $(that).attr("colSpan");

        if (colspan == undefined) {

          $(that).attr("colSpan",1);

          colspan = $(that).attr("colSpan");

        }

        colspan = Number(colspan)+1;

        $(that).attr("colSpan",colspan);

        $(this).hide(); // .remove();

      } else {

        that = this;

      }

      that = (that == null) ? this : that; // set the that if not already set

  });

 });


 });

 }

 $(function(){

$('.tb tbody tr').each(function(row) {

   $('.tb').colspan(row);

 });

 $('.tb tbody tr').each(function(col) {

   $('.tb').rowspan(col);

 });

});

<table id="spdata" class="tb">

  <thead>

                    <tr>

                        <th>星期</th>

                        <th>实验室</th>

                        <c:forEach items="${classMap}" var="current"  varStatus="i">

                        <th id="class_${current.key}">${current.value}</th>

                       </c:forEach>

                    </tr>

                </thead>

                <tbody>

                <c:forEach items="${labClassWeekdays}" var="current"  varStatus="i">

                        <tr>

                            <td>${current.weekdayName}</td>

                            <td>${current.labName}</td>

                            <c:forEach items="${classMap}" var="cur"  varStatus="k">

                        <td>  <c:forEach items="${labWeekdays}" var="lab" varStatus="j"><c:if test="${lab.weekdayId==current.weekdayId&&lab.labId==current.labId&&lab.classId==cur.key}">${lab.appointName}</c:if></c:forEach></td>

                           </c:forEach>

                        </tr>

                        </c:forEach>

                </tbody>

</table>

这个两个方法可以实现table中空格很少的上下左右单元格合并,如果其中空格很多的话就会出现错乱,多出一列,例如采用上述代码产生的表格里面有很多的空格,采用这种合并表格的方法就会出现如下图的效果:

因此,我在jsp代码做了如下操作让每个空的单元格里面隐藏一段不一样的代码如红色的代码

<table id="spdata" class="tb">

  <thead>

                    <tr>

                        <th>星期</th>

                        <th>实验室</th>

                        <c:forEach items="${classMap}" var="current"  varStatus="i">

                        <th id="class_${current.key}">${current.value}</th>

                       </c:forEach>

                    </tr>

                </thead>

                <tbody>

                <c:forEach items="${labClassWeekdays}" var="current"  varStatus="i">

                        <tr>

                            <td>${current.weekdayName}</td>

                            <td><div title="${current.memo}" class="wenben">${current.labName}</div></td>

                            <c:forEach items="${classMap}" var="cur"  varStatus="k">

                            <c:set var="labHours" scope="session" value="false"/><c:set var="courses" scope="session" value=""/><c:set var="courseDetails" scope="session" value=""/>

                        <c:forEach items="${labWeekdays}" var="lab" varStatus="j"><c:if test="${lab.weekdayId==current.weekdayId&&lab.labId==current.labId&&lab.classId==cur.key}"><c:set var="labHours" value="true"/><c:set var="courses" value="${lab.appointName}"/><c:set var="courseDetails" value="${lab.memo}"/></c:if></c:forEach>

                            <c:choose><c:when test="${labHours}"><td style="background-color: red"><div title="${courseDetails}" class="wenben">${courses}</div> <c:set var="labHours" value="false"/><c:set var="courses" value=""/><c:set var="courseDetails" scope="session" value=""/></td></c:when><c:otherwise><td> <div style="display:none">appoint_${current.weekdayId}_${current.labId}_${cur.key}</div></td></c:otherwise></c:choose>

                           </c:forEach>

                             </tr>

                        </c:forEach>

                </tbody>

</table>

就可以达到同时合并上下左右的单元格了

效果如下:

© 著作权归作者所有

wenwen1
粉丝 1
博文 26
码字总数 9049
作品 0
徐汇
私信 提问
28个有用的表格插件推荐

OSCHINA曾发布过文章“18个最好的 jQuery 表格插件”,今天再提供一份表格插件的长名单。 28个表格插件,列表如下: Table Sorter Tablesorter 是一个用来直接在浏览器上对表格数据进行排序的...

小卒过河
2011/07/01
4.5K
9
jqGrid 3.8 Beta 发布,下载

jqGrid 刚刚宣布了 3.8 Beta 版本的发布,3.8版本的目的是要做出更好的 jqGrid JavaScript库。 最大的更新是单元格分组功能。现在,您可以按列,包括组页脚摘要或不累计组行。 3.8版本现在也...

红薯
2010/09/08
2.1K
0
jQuery MiniUI v2.0 发布

jQuery MiniUI 是强大的企业级WEB控件库。 具有:datagrid、tree、comboBox、datepicker、menu、toolbar等一系列控件。 技术亮点: 强大表格控件:实现锁定列、多表头、分页排序、行过滤、数...

fcrong
2012/03/13
21.9K
53
mr_beany/myExcel

myExcel 介绍 基于jquery实现的web版excel。包含excel的基本功能 合并单元格,拆分单元格 插入单元格,删除单元格 整行整列选择单元格 自定义右键菜单,可以设置单元格数量 支持鼠标左键调整...

mr_beany
04/07
0
0
jQuery 表格工具集

本文搜集了大量 jQuery 表格插件,帮助 Web 设计者更好地驾御 HTML 表格,你可以对表格进行横向和竖向排序,设置固定表头,对表格进行搜索,对大表格进行分页,对表格进行滚动,拖放操作等等...

红薯
2010/04/15
9.5K
10

没有更多内容

加载失败,请刷新页面

加载更多

查看线上日志常用命令

cat 命令(文本输出命令) 通常查找出错误日志 cat error.log | grep 'nick' , 这时候我们要输出当前这个日志的前后几行: 显示file文件里匹配nick那行以及上下5行 cat error.log | grep -C ...

xiaolyuh
25分钟前
3
0
六、Java设计模式之工厂方法

工厂方法定义: 定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类,工厂方法让类的实例化推迟到子类中进行 类型:创建型 工厂方法-使用场景: 创建对象需要大量重复的代码 ...

东风破2019
31分钟前
3
0
win服务器管理遇到的一系列问题记录

有些小伙伴在使用iis7远程桌面管理工具的时候总是会遇到一系列的问题,下面就是为大家介绍一下服务器日常管理过程中出现的问题及我的解决办法和心得。希望能帮到大家。   拒绝服务器重新启...

1717197346
39分钟前
4
0
flutter 剪切板 复制粘贴

复制粘贴功能 import 'package:flutter/services.dart'; Clipboard.setData(ClipboardData(text:_text));Clipboard.getData;...

zdglf
41分钟前
3
0
如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题?

面试题 如何保证消息的可靠性传输?或者说,如何处理消息丢失的问题? 面试官心理分析 这个是肯定的,用 MQ 有个基本原则,就是数据不能多一条,也不能少一条,不能多,就是前面说的重复消费...

米兜
42分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部