方法一：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

     <table id="table1">

         <tr>

             <td>111</td>

             <td>222</td>

             <td>333</td>

         </tr>

         <tr>

             <td>111</td>

             <td>555</td>

             <td>333</td>

         </tr>

         <tr>

             <td>111</td>

             <td>888</td>

             <td>333</td>

         </tr>

         <tr>

             <td>aaa</td>

             <td>bbb</td>

             <td>333</td>

         </tr>

     </table>

     <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>

     <script>

     jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件

           return this.each(function(){

              var that;

              $('tr', this).each(function(row) {

                 $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {

                    if (that!=null && $(this).html() == $(that).html()) {

                       rowspan = $(that).attr("rowSpan");

                       if (rowspan == undefined) {

                          $(that).attr("rowSpan",1);

                          rowspan = $(that).attr("rowSpan"); }

                       rowspan = Number(rowspan)+1;

                       $(that).attr("rowSpan",rowspan);

                       $(this).hide();

                    } else {

                       that = this;

                    }

                 });

              });

           });

        }

        $(function() {

           $("#table1").rowspan(0);//传入的参数是对应的列数从0开始  第一列合并相同

           // $("#table1").rowspan(1);//传入的参数是对应的列数从0开始  第二列合并相同

        });

     </script>

 </script>

 </html>

合并前：

合并后：（根据实际项目需求，只合并第一列）

方法二：

     function hb() {

         var tab = document.getElementById("subtable");

         var maxCol = 3, val, count, start;

         var ys = "";

         for (var col = maxCol - 1; col >= 0 ; col--) {

             count = 1;

             val = "";

             for (var i = 0; i < tab.rows.length; i++) {

                 if (val == tab.rows[i].cells[col].innerHTML) {

                     count++;

                 } else {

                     if (count > 1) {

                         //合并

                         start = i - count;

                         if (ys == "#00FFFF") {

                             ys = "#EEEE00";

                         } else {

                             ys = "#00FFFF";

                         }

                         tab.rows[start].cells[col].rowSpan = count;

                         tab.rows[start].cells[1].style.backgroundColor = ys;//改变颜色

                         // ys="#EEEE00";

                         // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色

                         for (var j = start + 1; j < i; j++) { //

                             tab.rows[j].cells[col].style.display = "none";

                             tab.rows[j].removeChild(tab.rows[j].cells[col]);

                         }

                         count = 1;

                     }

                     val = tab.rows[i].cells[col].innerHTML;

                 }

             }

             if (count > 1) { //合并，最后几行相同的情况下

                 start = i - count;

                 tab.rows[start].cells[col].rowSpan = count;

                 for (var j = start + 1; j < i; j++) {

                     tab.rows[j].removeChild(tab.rows[j].cells[col]);

                 }

             }

         }

     }

第一种方法，仅用20行代码就可实现该功能，而且封装在jq库里面，其他页面可以直接调用。

第二种方法比较复杂，而且会把tabel里面所有相同列都合并，不实用。但是思路可以学习一下。

table表格合并列中相同的内容的更多相关文章

  1. table表格宽度固定，同时td内容过长也不会被撑开

    table表格宽度固定,同时td内容过长也不会被撑开,设置如下css: table{table-layout:fixed;word-break:break-all;}

  2. asp.net table/gridview 合并列

    public void MergeCell(TableRow trow) { TableCell currentCell = trow.Cells[0]; TableCell prevCell = n ...

  3. 普通table表格样式及代码大全(全)

    普通table表格样式及代码大全(全)(一) 单实线边框表格 <TABLE style="BORDER-COLLAPSE: collapse" borderColor=#00 ...

  4. 普通table表格样式及代码大全

     普通table表格样式及代码大全(全)(一) 单实线边框表格 <table style="border-collapse: collapse" borderColor=#0 ...

  5. html - table 表格不被撑开，td某些列宽度固定某些列自适应

    table-layout 属性的解释:http://www.w3school.com.cn/cssref/pr_tab_table-layout.asp 1,实现table细边框,设置如下css: t ...

  6. html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel，保留table样式

    先上代码   <script type="text/javascript" language="javascript">   var idTmr; ...

  7. table表格整体居中 和 table表格中各行各列内容居中

    1.table表格整个居中<div style="text-align: center;"> <table border="1" style= ...

  8. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  9. 关于html中table表格tr,td的高度和宽度

    关于html中table表格tr,td的高度和宽度 关于html中table表格tr,td的高度和宽度 做网页的时候经常会遇到各种各样的问题,经常遇到的一个就是会碰到表格宽度对不齐的问题.首先,来分析 ...

随机推荐

  1. Scala当中什么是Transformation和 Action，以及它们俩的区别是什么？

    [学习笔记] 一个完整的RDD任务由两部分组成:Transformation和 Action.Transformation用于对RDD的创建,还可以把老的RDD通过Transformation来生成新 ...

  2. （二十二）自定义简化版JDBC（Dbutils框架的设计思想）

    目录 元数据概念 DataBaseMetaData ParameterMetaData ResultSetMetaData 编写简化版的JDBC O-R Mapping 概念 自定义简化版JDBC 元 ...

  3. QT 打包exe

    QT打包主要方法: 1.把无措的代码进行Release编译 2.在运行完后,找到运行后生成的目录,以下是我的文件,名为result,运行类型有两种,一种是Debug,另一种是Release,我们需要的 ...

  4. Synchronized&Lock&AQS详解

    加锁目的:由于线程执行的过程是不可控的,所以需要采用同步机制来协同对对象可变状态的访问. 加锁方式:java锁分为两种--显示锁和隐示锁,本质区别在于显示锁需要的是程序员自己手动的进行加锁与解锁如Re ...

  5. 【Python基础】13_Python中的PASS

    pass关键字的使用 在程序分支中,如果不想立刻执行该分支,可使用pass占位符,pass不表示任何含义,仅保证程序不会报错. 如: action_str = input("请选择希望执行的 ...

  6. python — mysql基础知识

    目录 1 . 数据库的介绍 2. mysql 1 . 数据库的介绍 1.为什么要用数据库? 很多功能如果只是通过操作文件来改变数据是非常繁琐的,程序员需要做很多事情 对于多台机器或者多个进程操作用一份 ...

  7. C# 使用Emit实现动态AOP框架 (三)

    目  录 C# 使用Emit实现动态AOP框架 (一) C# 使用Emit实现动态AOP框架 (二) C# 使用Emit实现动态AOP框架 (三) C# 使用Emit实现动态AOP框架 进阶篇之异常处 ...

  8. iTop4412开发板+虚拟机+tftp服务

    感觉好坑啊 利用路由器+2根网线+tftp服务 首先是开发板,主机,虚拟机相互之间能ping通(坑), 关闭主机防火墙,防止被强 关闭虚拟机防火墙 虚拟机装上tftpd服务端(通过网上教程嘛) 是不是 ...

  9. 在Ubuntu中使用uwsgi 启动 Django ，但是静态文件映射出错

    错误 :  找不到/static/下面的静态文件 解决方法: 在uswgi.ini 文件中配置参数 static-map=/static=/home/wb/Desktop/test_django/st ...

  10. 14.JdbcUtils框架

    1.编写自己的JdbcUtils 框架 2.使用 dbUtils 框架 1.视频中自己编写的JdbcUtils框架差不多就是dbUtils框架 2.使用 使用dbutils框架完成curd,以及批处理 ...