合并单元格的情况，在开发中还是比较多见的，以下仅介绍合并行的情况。

原来的table效果

效果如下：

代码如下：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <link href="css/bootstrap.min.css" rel="stylesheet" />

    <title></title>

    <script src="js/jquery-1.11.3.min.js"></script>

    <style type="text/css">

        .table > thead > tr > th, .table > tbody > tr > th, .table > tfoot > tr > th, .table > thead > tr > td, .table > tbody > tr > td, .table > tfoot > tr > td {

            vertical-align: middle;

            text-align: center;

        }

    </style>

</head>

<body>

    <table class="table table-bordered table-striped table-hover">

        <thead>

            <tr>

                <th>公司</th>

                <th>事项</th>

                <th>年度</th>

            </tr>

        </thead>

        <tbody>

            <tr>

                <td>XX公司</td>

                <td>安全事故一</td>

                <td>2013</td>

            </tr>

            <tr>

                <td>XX公司</td>

                <td>安全事故二</td>

                <td>2014</td>

            </tr>

            <tr>

                <td>XX公司</td>

                <td>安全事故三</td>

                <td>2015</td>

            </tr>

            <tr>

                <td>XX公司</td>

                <td>安全事故四</td>

                <td>2016</td>

            </tr>

            <tr>

                <td>QQ公司</td>

                <td>安全事故</td>

                <td>2013</td>

            </tr>

            <tr>

                <td>QQ公司</td>

                <td>安全事故一</td>

                <td>2013</td>

            </tr>

            <tr>

                <td>QQ公司</td>

                <td>安全事故二</td>

                <td>2014</td>

            </tr>

            <tr>

                <td>QQ公司</td>

                <td>安全事故三</td>

                <td>2015</td>

            </tr>

            <tr>

                <td>QQ公司</td>

                <td>安全事故四</td>

                <td>2016</td>

            </tr>

            <tr>

                <td>MM公司</td>

                <td>安全事故一</td>

                <td>2013</td>

            </tr>

            <tr>

                <td>MM公司</td>

                <td>安全事故二</td>

                <td>2014</td>

            </tr>

            <tr>

                <td>MM公司</td>

                <td>安全事故三</td>

                <td>2015</td>

            </tr>

            <tr>

                <td>MM公司</td>

                <td>安全事故四</td>

                <td>2016</td>

            </tr>

        </tbody>

    </table>

    <script type="text/javascript">

        $(function () {

            MergeCells(0);

        });

        //合并单元格函数(cellIndex  代表合并td的索引)

        function MergeCells(cellIndex)

        {

            var $tr = $("table tbody tr");

            var companyList = new Array();

            //获得所有公司的名称

            $.each($tr, function (index, ele) {

                var text = $(ele).find("td").eq(cellIndex).text();

                companyList.push(text);

            });

            //公司名称分组统计

            var hist = {};

            companyList.map(function (a) {

                if (a in hist)

                    hist[a]++;

                else

                    hist[a] = 1;

            });

            //记录操作表格信息（起始TR索引，结束TR索引，合并行数，公司名称）

            var list = new Array();

            var temp = "";

            $.each(companyList, function (index, ele) {

                var obj = new Object();

                if (temp != ele) {

                    temp = ele;

                    obj.FirstIndex = index;

                    obj.RowSpan = hist[ele];

                    obj.EndIndex = index + obj.RowSpan - 1;

                    obj.Name = ele;

                    list.push(obj);

                }

            });

            //合并表格

            $.each(list, function (index, ele) {

                //设置rowspan

                $("table tbody tr:eq(" + ele.FirstIndex + ") td:eq("+cellIndex+")").attr("rowspan", ele.RowSpan);

                //清除多余行数

                var $removeTr = $("table tbody tr:gt(" + ele.FirstIndex + "):lt(" + ele.EndIndex + ")");

                $.each($removeTr, function (removeIndex, removeEle) {

                    if ($(removeEle).children("td:eq(" + cellIndex + ")").text() == ele.Name) {

                        $(removeEle).children("td:eq(" + cellIndex + ")").remove();

                    }

                });

            });

        }

    </script>

</body>

</html>

注意点：

要合并的单元格是经过此单元格的字段排序过的，保证合并单元格内的内容是紧挨着的。

【Web】jquery合并单元格的更多相关文章

  1. jQuery合并单元格以及还原重置

    一.合并rowspan jQuery.fn.rowspan = function(colIdx) { return this.each(function(){ var that; $('tr', th ...

  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. DataTables合并单元格(rowspan)的实现思路(多分组分类的情况)

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

  6. 带复杂表头合并单元格的HtmlTable转换成DataTable并导出Excel

    步骤: 一.前台JS取HtmlTable数据,根据设定的分隔符把数据拼接起来 <!--导出Excel--> <script type="text/javascript&qu ...

  7. NPOI之Excel——合并单元格、设置样式、输入公式

    首先建立一个空白的工作簿用作测试,并在其中建立空白工作表,在表中建立空白行,在行中建立单元格,并填入内容: //建立空白工作簿 IWorkbook workbook = new HSSFWorkboo ...

  8. 议：如何将树形菜单形式的数据转化成HTML的二维表（相同内容需合并单元格）

    一般做OA类管理系统,经常涉及到“组织架构”的概念,那么像这种有上下层级关系的数据一般会做成树形菜单的方式显示,底层代码必定会用到递归算法.这篇随笔的目的就是要谈谈除了用树形菜单来显示这种上下层级关系 ...

  9. JS合并单元格

    在Web中经常需要合并单元格,例如对于下面一个表格: <!DOCTYPE html> <html> <head> <meta charset="UT ...

随机推荐

  1. HDU - 6223 Infinite Fraction Path (倍增+后缀数组)

    题意:给定一个长度为n(n<=150000)的字符串,每个下标i与(i*i+1)%n连边,求从任意下标出发走n步能走出的字典序最大的字符串. 把下标看成结点,由于每个结点有唯一的后继,因此形成的 ...

  2. 闭包-IIFE

    1)嵌套函数,内部函数访问了外部函数的局部变量,通过返回内部函数,在函数外部调用内部函数,从而更新外部函数的局部变量的过程: 2)代码执行完成之后离开作用域依旧存在 3)有可能发生内存泄露,若对象的引 ...

  3. VUE-练习

    作业一:有红黄蓝三个按钮,以及一个200*200矩形box,点击不同按钮,box的颜色会被切换为指定的颜色 <!DOCTYPE html> <html lang="en&q ...

  4. 解决laydate动态设置初始值的问题

    //初始化//注意:我这里是时间范围选择,所以定义了range属性.var timeScope = laydate.render({ elem: '#time_scope', range: '~', ...

  5. HDU-4300-Clairewd's message(扩展KMP)

    链接: https://vjudge.net/problem/HDU-4300 题意: Clairewd is a member of FBI. After several years conceal ...

  6. java两个实体公共属性赋值方法

    model1 info=new model1();info.setAge("123");info.setCode("1234");info.setName(&q ...

  7. 01- ES6、jquery源码、node、webpack

    1.课程介绍 小马哥blog:https://www.cnblogs.com/majj/ 前端学习路径:https://www.processon.com/view/link/5d3a5947e4b0 ...

  8. 前端Web浏览器基于Flash如何实时播放监控视频画面（二）之Windows搭建（RTMP）流媒体服务器

    本片文章只是起到抛砖引玉的作用,能从头到尾走通就行,并不做深入研究.为了让文章通俗易懂,尽量使用白话描述. 0x001: 获取 流媒体服务器有很多,这里以nginx为例. nginx for Wind ...

  9. webpack官方文档分析（一）：安装

    一:安装 1.首先要安装Node.js->node.js下载 2.本地安装 要安装最新版本或特定版本,运行如下: npm install --save-dev webpack npm insta ...

  10. 四、SpringBoot整合mybatis——配置mybatis驼峰命名规则自动转换

    简述: mybatis驼峰式命名规则自动转换: 使用前提:数据库表设计按照规范“字段名中各单词使用下划线"_"划分”:使用好处:省去mapper.xml文件中繁琐编写表字段列表与表 ...