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

原来的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. 【转】关于 Ruby 解释器：一些你需要知道的

    关于 Ruby 解释器:一些你需要知道的 原文:Ruby Interpreters: What You Need to Know 使用正确的 Ruby 解释器来运行程序可以发挥重要作用,不幸的是很难找 ...

  2. impdp导入报错39002

    原文:https://www.cnblogs.com/huacw/p/3888807.html 1 create directory data_pump_dir as '\exphd\datapump ...

  3. CF888G Xor-MST[最小生成树+01trie]

    前注:关于这题,本人的解法暂时没有成功通过此题,原因是被卡常了.可能需要等待某种机缘来请人调试. 类似uoj的一道题(新年的繁荣),不过是一个有些简单的版本. 因为是完全图,有没有办法明显优化建边,所 ...

  4. NTP服务及时间同步

    环境: centos7 server   192.168.2.171 client    192.168.2.173.192.168.2.174 整体思路:173.174同步171的时间,171定时同 ...

  5. java.sql.SQLException: Unknown column 'user0_.user_name' in 'field list' 报错问题

    报错信息: java.sql.SQLException: Unknown column 'user0_.user_name' in 'field list'Query is: select user0 ...

  6. pytorch tensor 维度理解.md

    torch.randn torch.randn(*sizes, out=None) → Tensor(张量) 返回一个张量,包含了从标准正态分布(均值为0,方差为 1)中抽取一组随机数,形状由可变参数 ...

  7. 系统开发模型MVC和三层架构

    系统开发模型共经历四个阶段: 一.纯JSP 二.JSP+JavaBean的ModeI1 JavaBean的分类               三.MVC的Model2 四.三层架构

  8. GDIPlus的使用准备工作

    GDIPlus的使用 stdafx.h加入如下代码: #include <comdef.h>//初始化一下com口 #include "GdiPlus.h" using ...

  9. 油猴Tampermonkey离线安装流程（附文件）

    1.下载插件插件包,然后解压(解压到你想放插件的位置,其实任意位置都可以,记住解压的位置) 链接:https://pan.baidu.com/s/1aanhsb6ZlapnzBeBRtp3Hg 提取码 ...

  10. JavaWeb-RESTful(二)_使用SpringMVC开发RESTful_上

    JavaWeb-RESTful(一)_RESTful初认识 传送门 JavaWeb-RESTful(二)_使用SpringMVC开发RESTful_上 传送门 JavaWeb-RESTful(三)_使 ...