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

原来的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. CSS基础学习-8.CSS盒子模型_标准盒子&&9.CSS怪异盒子

    怪异盒模型 box-sizing:content-box;/*正常盒模型,默认值*/ box-sizing:border-box:/*怪异盒模型,固定了盒子的大小,无论是否添加内边距还是边框,盒子的大 ...

  2. 最简单之安装hadoop单机版

    一,hadoop下载 (前提:先安装java环境) 下载地址:http://hadoop.apache.org/releases.html(注意是binary文件,source那个是源码) 二,解压配 ...

  3. x86和x64下指针的大小

    根据测试 int main() { ; )); )); int n1 = sizeof(a); int n2 = sizeof(p); // int n3 = sizeof(*p); error in ...

  4. 【CF786B】Legacy

    题目大意:初始给定 N 个点,支持三种操作:两点之间连边:一个点与一个连续区间编号的点之间连边:一个连续区间内的点和一个点连边,求执行 N 次操作之后的单源最短路. 题解:学会了线段树优化建图. 发现 ...

  5. Python的f.seek(offset, whence)函数

    file.seek()方法标准格式是:seek(offset,whence=0)offset:开始的偏移量,也就是代表需要移动偏移的字节数whence:给offset参数一个定义,表示要从哪个位置开始 ...

  6. vue3.0以上关于打包后出现空白页和路由不起作用

    1.解决页面空白,找不到资源 在项目根目录中的vue.config.js中publicPath: '/'修改为publicPath: './',如果没有这个文件,新建一个,基础代码为: module. ...

  7. ipvsadm命令用法

    ipvsadm命令选项 -A                         添加虚拟服务器 -E                         修改虚拟服务器 -D                 ...

  8. Servlet中的请求转发RequestDispatcher接口的forword与Include的区别

    RequestDispatcher接口中具有两个方法: forward() 与 include() 均 可完成请求 的转发.区别如下: forword(): 使用该方法,则当前 的 Servlet 中 ...

  9. 与word、excel交互问题总结

    不同版本的Office对应的型号不同,往往问题出现在注册表中有多个版本,所以程序运行经常提示错误. 1.找不到引用microsoft.office.core解决办法 (引用中有感叹号,说明引用不成功) ...

  10. Java进阶知识06 Hibernate一对一单向外键关联（Annotation+XML实现）

    1.Annotation 注解版 1.1.创建Husband类和Wife类 package com.shore.model; import javax.persistence.Entity; impo ...