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

原来的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如何水平垂直居中？

    CSS如何水平垂直居中? 1.CSS如何实现水平居中? margin: 0 auto 2.CSS如何实现水平垂直居中? 首先设置一个div元素,设置背景颜色以便看出变化.代码如下: <!DOCT ...

  2. 一键生成 dao service serverImpl controller 层

    package com.nf147.policy_publishing_platform.util.auto; import java.io.File; import java.io.FileWrit ...

  3. 清除Tomcat缓存

        删除tomcat目录下的缓存文件分别位于:                   tomcat/work                 tomcat/temp                  ...

  4. 课时5:POW,POS,DPOS(矿工/矿机,工作证明)

    比特币钱包

  5. C#与数据库有关的控件和属性

    BindingNavigator  数据记录导航 BindingSource 与数据源绑定, 常用属性:DataSource.DataMember 常用方法: DataGridView 以表格形式显示 ...

  6. HDU4135 Co-prime

    题目链接:Click here Solution: 简单容斥,我们先把\(N\)分解质因数,我们知道\(1\sim x\)里能整除\(i\)的数的个数为\(\lfloor \frac{x}{i} \r ...

  7. win10专业版安装docker实战

    在win10专业版上安装docker 一,下载Docker for Windows Installer.exe 二,在程序面板---程序----程序和功能中找到启动或关闭windows功能,将hype ...

  8. LeetCode 6. Z字形变换（ZigZag Conversion）

    题目描述 将字符串 "PAYPALISHIRING" 以Z字形排列成给定的行数: P A H N A P L S I I G Y I R 之后从左往右,逐行读取字符:"P ...

  9. LeetCode 21. 合并两个有序链表（Merge Two Sorted Lists）

    题目描述 将两个有序链表合并为一个新的有序链表并返回.新链表是通过拼接给定的两个链表的所有节点组成的. 示例: 输入:1->2->4, 1->3->4 输出:1->1-& ...

  10. Ubuntu16.04安装nginx(并启用SSL)

    一.安装环境介绍 需要预先安装gcc,通常ubuntu默认自带,所以默认已经有这个环境了,后续步骤默认是使用root账户进行的 二.下载及安装nginx相关组件 1.进入任意目录,我选用的是通常选用的 ...