文档章节

js合并单元格(相同)

Delete90
 Delete90
发布于 2017/08/03 17:31
字数 605
阅读 15
收藏 0
<!DOCTYPE HTML>
<html>

<head>
    <title>Example</title>
    <meta charset="utf-8" />
    <style></style>
    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
</head>

<body>
    <table id="process" cellpadding="2" cellspacing="0" border="1">
        <thead>
            <tr>
                <td>col0</td>
                <td>col1</td>
                <td>col2</td>
                <td>col3</td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>SuZhou</td>
                <td>11111</td>
                <td>22222</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>33333</td>
                <td>国家</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>SuZhou</td>
                <td>55555</td>
                <td>国家</td>
                <td>SuZhouCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>77777</td>
                <td>88888</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>uuuuu</td>
                <td>hhhhh</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>ShangHai</td>
                <td>ggggg</td>
                <td>ccccc</td>
                <td>ShangHaiCity</td>
            </tr>
            <tr>
                <td>GuangZhou</td>
                <td>ttttt</td>
                <td>eeeee</td>
                <td>GuangZhouCity</td>
            </tr>
            <tr>
                <td>GuangZhou</td>
                <td>ppppp</td>
                <td>qqqqq</td>
                <td>GuangZhouCity</td>
            </tr>
        </tbody>
    </table>

    <script type="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 == void 0) {
                _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;
                    } else if ((_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;
                        }
                    }
                });
            });
        }
        $(document).ready(function() {
            _w_table_rowspan("#process", 4);
            _w_table_rowspan("#process", 3);
            _w_table_rowspan("#process", 2);
            _w_table_rowspan("#process", 1);
        });

    </script>
</body>

</html>

 

© 著作权归作者所有

Delete90
粉丝 4
博文 49
码字总数 33169
作品 0
程序员
私信 提问
回到基础:如何用原生 DOM API 生成表格

翻译:疯狂的技术宅 原文:https://www.valentinog.com/blog/html-table/ 怎样用原生 JavaScript 生成表格需?本文告诉你答案! 这是一个刷 JavaScript 经验值的好机会:在技术面试中出现的最...

疯狂的技术宅
03/14
0
0
html 替换table中th的内容出现问题

代码如下:<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %> <%@ page language="java" isELIgnored="false" contentType="text/html; charset=utf-8" pageE......

wenwen1
2014/01/05
1K
0
jxl导入/导出Excel(Maven)

About jxl is a pure java 5 super-project that includes Enclosure, Peermi, Enshell, and Xlp. jxl && POI jxl是一个开源的Java Excel API项目,通过Jxl,Java可以很方便的操作微软的Exc......

coderzs
2017/08/31
0
0
Bootstrap 3.2.0 源码试读 2014/08/10

第一部分 normalize.css 167至171行 fieldset { padding: .35em .625em .75em; margin: 0 2px; border: 1px solid #c0c0c0;}legend { padding: 0; border: 0;} 表单分组标题的内添充为上 .2......

潘金莲子羹
2014/08/10
0
1
FineReport中如何用JavaScript解决控件值刷新不及时

我们经常利用按钮进行一些页面值的处理工作,但是默认的逻辑造成,每次新填报的值,需要点击下空白区域或是执行某个其他操作才可以被正确读取,那么我们如何处理呢? 例:当我们用常规取值的...

雄霸天下啦
2018/06/26
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Docker搭建Mysql集群、主从同步复制

1、创建数据挂载点: mkdir /opt/mysql-master/mysql、/opt/mysql-master/conf.d、/opt/mysql-slave/conf.d、/opt/mysql-slave/conf.d 2、分别在master、slave节点文件目录conf.d下创建touch......

WALK_MAN
14分钟前
0
0
手把手教你做中间件开发(分布式缓存篇)-借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo

本文档配合主要对如下demo进行配合说明: 借助redis已有的网络相关.c和.h文件,半小时快速实现一个epoll异步网络框架,程序demo 0. 手把手教你做中间件、高性能服务器、分布式存储技术交流群 ...

y123456yz
15分钟前
0
0
阿里技术男的成长史:越想证明自己死得越快……

在上海工作8年后,身为部门经理的钱磊,管理着一家ERP公司的百十来号员工,“再往上爬就是老板和他儿子了……从这个领域的技术角度来讲算是做到了顶。”05年,钱磊就开始关注一家名字奇怪,做...

阿里云云栖社区
19分钟前
1
0
Spring-boot单元测试(私有方法测试)

Spring-boot的单元测试网上有了很多,当项目是可以使用spring-boot正常运行时,只要在测试类上添加如下配置就使用@Autowired的方式进行单元测试 @RunWith(SpringJUnit4ClassRunner.class)@...

琴兽
36分钟前
0
0
spring cloud(第一部)框架概述

关于微服务 近几年,'微服务'这个词越来越多的被身边的人所提及,到底什么是微服务,为什么微服务总是伴随着spring cloud被人们所提及,这里笔者结合多年的技术经历跟大家分享下自己的理解:...

白中墨
37分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部