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

原来的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. Linux Bonding

    https://www.cnblogs.com/huangweimin/articles/6527058.html 管理   linux下网卡bonding配置   章节 bonding技术 cent ...

  2. 转：ubuntu添加用户adduser,并给予sudo权限

    ubuntu添加用户adduser,并给予sudo权限 如何创建ubuntu新用户? 首先打开终端,输入:sudo adduser username正在添加用户“username”... 正在添加新组 ...

  3. ESP8266乐鑫版本的（支持云端升级 （Boot 模式）烧写方法，(V1.5.4官方介绍如下)（BOOT模式）

    硬件平台: nodeMCU devkit核心板,带ch340g,应该是仿造的,官方是cp2102驱动,安信可科技有连接https://wiki.ai-thinker.com/esp8266/board ...

  4. .md(markdown)基础语法

    markdown基础语法笔记,方便翻看. 1. 标题 标题有3中写法,可混写: (1)# ***,前面#,后面文字,注意,#与文字间有空格,1-6个#分别表示h1-h6,h1.h2下有横线 (2)== ...

  5. Oracle之：Function ：getcurrdate()

    getdate()函数连接请戳这里 create or replace function getcurrdate(i_date date) return date is v_date date; v_ ...

  6. pytorch 图片处理.md

    本篇所有代码位置链接

  7. iis与编辑

    hostname:域名initializationPage:对应域名下任意可访问action

  8. vue 手机物理返回键关闭弹框

    1.打开弹窗调用 window.history.pishState() 函数 2.关闭弹框 3.mounted 生命周期 监听popstate 事件 4.beforeDestroy 生命周期 移除po ...

  9. Python excel文件操作，编程练习题实例七十五

    纯文本文件 student.txt为学生信息, 里面的内容(包括花括号)如下所示: { "1":["张三",150,120,100], "2" ...

  10. html基础（img、a、列表 ）

    图片标签(img) <img src="图片路径" alt="图片描述 图片无法正常显示出现文字" title="爱你"/> i ...