JS代码:

   <scriptsrc="../js/jquery-1.6.1.min.js"type="text/javascript"></script>

    <linkhref="../css/common.css"rel="stylesheet"type="text/css"/>

    <scripttype="text/javascript">

        //函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格

        //参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data

        //参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。

        function_w_table_rowspan(_w_table_id,_w_table_colnum) {

            _w_table_firsttd="";

            _w_table_currenttd="";

            _w_table_SpanNum=0;

            _w_table_Obj=$(_w_table_id+" tr td:nth-child("+_w_table_colnum+")");

            _w_table_Obj.each(function (i) {

                if (i==0) {

                    _w_table_firsttd=$(this);

                    _w_table_SpanNum=1;

                } else {

                    _w_table_currenttd=$(this);

                    if (_w_table_firsttd.text() ==_w_table_currenttd.text()) {

                        _w_table_SpanNum++;

                        _w_table_currenttd.hide(); //remove();

                        _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);

                    } else {

                        _w_table_firsttd=$(this);

                        _w_table_SpanNum=1;

                    }

                }

            });

        }

 

        //函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格

        //参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data

        //参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。

        //          如果为数字,则从最左边第一行为1开始算起。

        //          "even" 表示偶数行

        //          "odd" 表示奇数行

        //          "3n+1" 表示的行数为1、4、7、10.......

        //参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。

        //          此参数可以为空,为空则指定行的所有单元格要进行比较合并。

        function_w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum) {

            if (_w_table_maxcolnum==void0) { _w_table_maxcolnum=0; }

            _w_table_firsttd="";

            _w_table_currenttd="";

            _w_table_SpanNum=0;

            $(_w_table_id+" tr:nth-child("+_w_table_rownum+")").each(function (i) {

                _w_table_Obj=$(this).children();

                _w_table_Obj.each(function (i) {

                    if (i==0) {

                        _w_table_firsttd=$(this);

                        _w_table_SpanNum=1;

                    } elseif ((_w_table_maxcolnum>0) && (i>_w_table_maxcolnum)) {

                        return"";

                    } else {

                        _w_table_currenttd=$(this);

                        if (_w_table_firsttd.text() ==_w_table_currenttd.text()) {

                            _w_table_SpanNum++;

                            _w_table_currenttd.hide(); //remove();

                            _w_table_firsttd.attr("colSpan",_w_table_SpanNum);

                        } else {

                            _w_table_firsttd=$(this);

                            _w_table_SpanNum=1;

                        }

                    }

                });

            });

        } 

 

    </script>

    <scripttype="text/javascript"><!--

        $(document).ready(function () {

            alert("ok");

            _w_table_rowspan("#tab",1);

            _w_table_rowspan("#tab",2);

            _w_table_rowspan("#tab",3);

 

            //            _w_table_rowspan("#spdata", 3);

            //            _w_table_rowspan("#spdata", 2);

            //            _w_table_rowspan("#spdata", 1);

        }); 

// -->

</script> 

HTML表格格式:

<tableid="tab"  border="1">

            <trclass="left_title_header">

                <tdclass="style2">

                   I级分类</td>

                <tdclass="style2">

                    II级分类</td>

   

                <tdclass="style2">

                   可用试题数量</td>

            </tr>

            <trclass="left_title_2"align="center">

                <tdalign="center">

                   基础类</td>

                <tdalign="center">

                    语言类</td>

                <tdalign="center">

                    3</td>

      

            </tr>

         <trclass="left_title_2"align="center">

                <tdalign="center">

                   基础类</td>

                <tdalign="center">

                    管理类</td>

                <tdalign="center">

                    3</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center"class="style2">

                   基础类</td>

                <tdalign="center"class="style2">

                    动作类</td>

                <tdalign="center"class="style2">

                    4</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                   基础类</td>

                <tdalign="center">

                    视觉类</td>

                <tdalign="center">

                    4</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                    技术类</td>

                <tdalign="center">

                    软件开发类</td>

                <tdalign="center">

                    5</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                    技术类</td>

                <tdalign="center">

                    生物制药类</td>

                <tdalign="center">

                    5</td>

      

            </tr><trclass="left_title_2"align="center">

                <tdalign="center">

                    技术类</td>

                <tdalign="center">

                    医学类</td>

                <tdalign="center">

                    5</td>

      

            </tr>

        </table>

效果:

转载于:https://www.cnblogs.com/yinxiaofeng/archive/2012/09/05/2672356.html

JQuery合并table单元格--有限制(table格式需要注意)相关推荐

  1. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格 一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格,用J ...

  2. 设置Table单元格颜色(Table篇三)

    组件:Y_XIAO_03 视图:V_MAIN 窗口:W_MAIN Application:Y_XIAO_03 创建组件. 创建节点. 参考类型(重要字段:CELL_COLOR TYPE WDUI_TA ...

  3. js 拼接html 表格,js合并table单元格(拼table的时候并不知道具体几行几列)

    Sys.Application.add_load(function () { var tab = document.getElementById("ctl00_ContentPlaceHol ...

  4. Element Table 单元格中嵌套表格(Table) 合并行效果

    在Element中实现表格合并行功能一般是通过自定义span-method方法,此方法要求表格数据源中需要合并行的单元格中数据相同,根据相同数据来实现合并算法. 本例通过在父Table单元格中嵌套子T ...

  5. Vue.js 根据数据,进行Table单元格合并

    Vue.js 根据数据,进行Table单元格合并 ITKouSyou 2018-10-16 14:29:40  3493  收藏 2 展开  表格代码 <table cellspacing=&q ...

  6. element ui 的table单元格合并

    element ui中的table表格数据是动态生成的,如果说后台要求我们对单元格进行合并,这个时候需要借助一个api,:span-method="arraySpanMethod" ...

  7. html5 单元格宽度,html table呈现个人简历以及单元格宽度失效的问题解决

    正确的实现代码如下: 个人简历 个人简历 个人资料姓名婚姻照片出 生政治面貌性 别民 族学 位移动电话专 业电子邮件地址:教育背景2012.9 - 2014.9中国海洋大学本科特长及兴趣爱好篮球.足球 ...

  8. php td内容换行,table单元格内容过多换行显示

    节目名称所属电视台版本开始时间结束时间获取时间操作 [#if list][#list list.items as t] ${t.program}${t.channelName}${t.__v}${t. ...

  9. css表格强制不换行符,css控制table单元格强制换行与强制不换行

    css 我们先看一下css手册中,对于list-style地解释: 定义和用法 list-style 简写属性在一个声明中设置所有地列表属性. 说明 该属性是一个简写属性,涵盖了所有其他列表样式属性. ...

  10. IVIEW组件中Table单元格可编辑、加入各种图表

    后端项目地址:https://gitee.com/wlovet/table-server 前端项目地址:https://gitee.com/wlovet/table-project 一.Render函 ...

最新文章

  1. Centos7 修改运行级别
  2. SQL Plus的主要功能
  3. Excel 货币中文大写汉字转化
  4. 那些不用上班的老人每天是不是很幸福?
  5. JDBC 获取 Oracle 数据库连接(使用 Driver)
  6. JY游戏开发,案例之 《下到一百层》,欢迎大家品赏。
  7. Spring MVC--@RequestMapping
  8. java变量练习_Java变量与运算符练习
  9. c语言课程建设与改革,C语言程序设计课程教学改革的研究与实践
  10. Html5 Canvas动画基础碰撞检测的实现
  11. SeetaFace6人脸识别源码编译和示例运行
  12. 隆重推荐:吴闲云 - 三国中的博弈
  13. 某程序员入职后,发现领导是前公司的下属
  14. python12306学生票抢票脚本下载_Python 12306抢火车票脚本 Python京东抢手机脚本
  15. 植物大战僵尸修改存档总结
  16. 服务器日志文件已被清除恢复,Linux服务器入侵后日志文件删除/恢复方法
  17. perl生成图片_使用Perl生成模拟数据
  18. Spring Boot 接入钉钉扫码登录
  19. el-form 清除表单验证结果
  20. 分享一下自己的用的几个网站 嘿嘿嘿

热门文章

  1. python 点云配准,python点云滤波 点云配准用python怎
  2. git 编辑提交的技巧
  3. 第三个维度:z-index
  4. html自动给js添加版本号,通过gulp 在原html文件上自动化添加js、css版本号
  5. img之间出现缝隙的原因_神马情况?美缝剂施工出现脱胶是什么原因?
  6. openresty模板html页面,单页面部署去Html缓存 nginx/openresty
  7. android 横盘方向传感器,横盘震荡选择方向!
  8. 高速软件加密锁技术的发展历程
  9. VB 实现UTF-8 与GB2312互转
  10. 交换机 路由器和集线器的区别