利用<td rowspan = "num"/>;原理来实现，其中num为要合并的行数。

  1. <!DOCTYPE html>
  2. <html>
  3. <head lang="en">
  4.     <meta charset="UTF-8">
  5.     <title></title>
  6.     <style>
  7.         td{
  8.             border:1px solid red;
  9.         }
  10.     </style>
  11. </head>
  12. <body>
  13. <table class="table mbn tc-med-1 tc-bold-last tc-fs13-last" id="table1">
  14.     <thead>
  15.     <tr>
  16.         <th>品牌</th>
  17.         <th>车型</th>
  18.         <th>性别</th>
  19.         <th>配额数</th>
  20.         <th>完成数</th>
  21.     </tr>
  22.     </thead>
  23.     <tbody>
  24.     <tr>
  25.         <td>宝马</td>
  26.         <td>3系</td>
  27.         <td>男</td>
  28.         <td>200</td>
  29.         <td>100</td>
  30.     </tr>
  31.     <tr>
  32.         <td>宝马</td>
  33.         <td>3系</td>
  34.         <td>女</td>
  35.         <td>100</td>
  36.         <td>57</td>
  37.     </tr>
  38.     <tr>
  39.         <td>宝马</td>
  40.         <td>5系</td>
  41.         <td>男</td>
  42.         <td>100</td>
  43.         <td>68</td>
  44.     </tr>
  45.     <tr>
  46.         <td>宝马</td>
  47.         <td>5系</td>
  48.         <td>女</td>
  49.         <td>200</td>
  50.         <td>94</td>
  51.     </tr>
  52.     <tr>
  53.         <td >宝马</td>
  54.         <td>7系</td>
  55.         <td>男</td>
  56.         <td>100</td>
  57.         <td>68</td>
  58.     </tr>
  59.     <tr>
  60.         <td>宝马</td>
  61.         <td>7系</td>
  62.         <td>女</td>
  63.         <td>100</td>
  64.         <td>68</td>
  65.     </tr>
  66.     </tbody>
  67. </table>
  68. </body>
  69. </html>
  70. <script src="design/static/js/jquery.js"></script>
  71. <script src="design/static/js/jquery-ui-1.10.min.js"></script>
  72. <script>
  73.     jQuery.fn.rowspan = function(colIdx) { //封装的一个JQuery小插件
  74.         return this.each(function(){
  75.             var that;
  76.             $('tr', this).each(function(row) {
  77.                 $('td:eq('+colIdx+')', this).filter(':visible').each(function(col) {
  78.                     if (that!=null && $(this).html() == $(that).html()) {
  79.                         rowspan = $(that).attr("rowSpan");
  80.                         if (rowspan == undefined) {
  81.                             $(that).attr("rowSpan",1);
  82.                             rowspan = $(that).attr("rowSpan"); }
  83.                         rowspan = Number(rowspan)+1;
  84.                         $(that).attr("rowSpan",rowspan);
  85.                         $(this).hide();
  86.                     } else {
  87.                         that = this;
  88.                     }
  89.                 });
  90.             });
  91.         });
  92.     }
  93.     $(function() {
  94.         $("#table1").rowspan(0);//传入的参数是对应的列数从0开始
  95.         $("#table1").rowspan(1);
  96.         $("#table1").rowspan(2);
  97.         $("#table1").rowspan(3);
  98.     });
  99. </script>

其它几种方法：

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <title>merge.html</title>
  5.     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
  6.     <meta http-equiv="description" content="this is my page">
  7.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  8.     <link rel="stylesheet" href="css/jquery-ui.css" />
  9.     <script src="design/static/js/jquery.js"></script>
  10.     <script src="design/static/js/jquery-ui-1.10.min.js"></script>
  11.     <script type="text/javascript">
  12.         function merge1(){ //可实现单元格，通过给 开始cell的比较
  13.             var totalRow = $("#tbl").find("tr").length;
  14.             var totalCol = $("#tbl").find("tr").eq(0).find("td").length;
  15.             for(var col=totalCol-1;col>=1;col--){
  16.                 spanNum =1;
  17.                 startCell = $("#tbl").find("tr").eq(totalRow-1).find("td").eq(col);
  18.                 for(var row = totalRow-1;row>=1;row--){
  19.                     targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
  20.                     if(startCell.text() == targetCell.text() && startCell.text()!=""){
  21.                         spanNum++;
  22.                         targetCell.attr("rowSpan",spanNum);
  23.                         startCell.remove();
  24.                     }else{
  25.                         spanNum =1;
  26.                     }
  27.                     startCell = targetCell;
  28.                 }
  29.             }
  30.         }
  31.         function merge2() { //可实现合并单元格,上下行来比较
  32.             var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
  33.             var totalRows = $("#tbl").find("tr").length;
  34.             for ( var i = totalCols-1; i >= 1; i--) {
  35.                 for ( var j = totalRows-1; j >= 1; j--) {
  36.                     startCell = $("#tbl").find("tr").eq(j).find("td").eq(i);
  37.                     targetCell = $("#tbl").find("tr").eq(j - 1).find("td").eq(i);
  38.                     if (startCell.text() == targetCell.text() && targetCell.text() != "") {
  39.                         targetCell.attr("rowSpan", (startCell.attr("rowSpan")==undefined)?2:(eval(startCell.attr("rowSpan"))+1));
  40.                         startCell.remove();
  41.                     }
  42.                 }
  43.             }
  44.         }
  45.         /*先合并，使用style 的display:none将相同元素隐藏，然后再remove
  46.          */
  47.         function merge3(){
  48.             var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
  49.             var totalRows = $("#tbl").find("tr").length;
  50.             for(var col=totalCols-1;col>=1;col--){
  51.                 spanNum =1;
  52.                 startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
  53.                 for(var row = totalRows-1;row>=1;row--){
  54.                     targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
  55.                     if(startCell.text() == targetCell.text() && startCell.text()!=""){
  56.                         spanNum++;
  57.                         targetCell.attr("rowSpan",spanNum);
  58.                         startCell.attr("style","visibility:hidden");
  59. // startCell.attr("style","display:none");
  60.                     }else{
  61.                         spanNum =1;
  62.                     }
  63.                     startCell = targetCell;
  64.                 }
  65.             }
  66.             for(var j=totalCols-1;j>=1;j--){
  67.                 for(var i=totalRows-1;i>=1;i--){
  68.                     cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
  69.                     if(cell.attr("style")!=undefined){
  70.                         if(cell.attr("style")=="visibility:hidden"){
  71.                             cell.remove();
  72.                         }
  73.                     }
  74.                 }
  75.             }
  76.         }
  77.         function merge4(){ //与merge3方法类似，目的是看一下 display:none与visibility:hidden的效果区别
  78.             var totalCols = $("#tbl").find("tr:eq(0)").find("td").length;
  79.             var totalRows = $("#tbl").find("tr").length;
  80.             for(var col=totalCols-1;col>=1;col--){
  81.                 spanNum =1;
  82.                 startCell = $("#tbl").find("tr").eq(totalRows-1).find("td").eq(col);
  83.                 for(var row = totalRows-1;row>=1;row--){
  84.                     targetCell = $("#tbl").find("tr").eq(row-1).find("td").eq(col);
  85.                     if(startCell.text() == targetCell.text() && startCell.text()!=""){
  86.                         spanNum++;
  87.                         targetCell.attr("rowSpan",spanNum);
  88.                         startCell.attr("style","display:none");
  89. // startCell.attr("style","display:none");
  90.                     }else{
  91.                         spanNum =1;
  92.                     }
  93.                     startCell = targetCell;
  94.                 }
  95.             }
  96.             for(var j=totalCols-1;j>=1;j--){
  97.                 for(var i=totalRows-1;i>=1;i--){
  98.                     cell = $("#tbl").find("tr").eq(i).find("td").eq(j);
  99.                     if(cell.attr("style")!=undefined){
  100.                         if(cell.attr("style")=="display:none"){
  101.                             cell.remove();
  102.                         }
  103.                     }
  104.                 }
  105.             }
  106.         }
  107.     </script>
  108. </head>
  109. <body>
  110. <table id="tbl" cellpadding="3" border=1>
  111.     <thead>
  112.     <tr>
  113.         <td>销售时间</td>
  114.         <td>裙子</td>
  115.         <td>裤子</td>
  116.         <td>风衣</td>
  117.         <td>鞋子</td>
  118.     </tr>
  119.     </thead>
  120.     <tbody>
  121.     <tr>
  122.         <td>8:00-9:00</td>
  123.         <td>3</td>
  124.         <td>2</td>
  125.         <td>4</td>
  126.         <td>3</td>
  127.     </tr>
  128.     <tr>
  129.         <td>9:00-10:00</td>
  130.         <td>3</td>
  131.         <td>2</td>
  132.         <td>5</td>
  133.         <td>3</td>
  134.     </tr>
  135.     <tr>
  136.         <td>10:00-11:00</td>
  137.         <td>3</td>
  138.         <td>2</td>
  139.         <td>5</td>
  140.         <td>1</td>
  141.     </tr>
  142.     <tr>
  143.         <td>11:00-12:00</td>
  144.         <td>2</td>
  145.         <td>2</td>
  146.         <td>4</td>
  147.         <td>1</td>
  148.     </tr>
  149.     </tbody>
  150. </table>
  151. <input type="button" value="合并" id="merge" onclick="merge2();">
  152. </body>
  153. </html>

jquery动态合并表格行的更多相关文章

  1. jquery 动态添加表格行

    jquery 动态添加表格行 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <h ...

  2. 第84天：jQuery动态创建表格

    jQuery动态创建表格 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&q ...

  3. element 动态合并表格

    前言 element 官方的例子太简单了,不满足实际的需求 数据肯定是动态的,合并的行数,列数都是动态的,该如何知道每一行的合并数呢 需求 动态合并表格,数据来源于数据库 正文 一开始,我的数据源是单 ...

  4. 合并表格行---三层for循环遍历数据

    合并表格行---三层for循环遍历数据 示例1 json <!DOCTYPE html> <html lang="zh_cn"> <head> ...

  5. jQuery动态对表格Table进行添加或删除行以及修改列值操作

    jQuery,不仅可以以少量的代码做很多操作,而且兼容性好(各种浏览器,各种版本). 下面用jQuery动态对表格Table进行添加或删除行以及修改列值操作 1.jQuery代码 <script ...

  6. 编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

    编辑表格输入内容.根据input输入框输入数字动态生成表格行数.编辑表格内容提交传给后台数据处理 记录自己学习做的东西,写的小demo,希望对大家也有帮助! 代码如下: <!DOCTYPE ht ...

  7. jquery动态创建表格

    1.代码实例 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UT ...

  8. Jquery动态插入table行

    想在一个<table id="table1"></table>标签中动态的插入行,在jquery中可以这样做: $("#table1") ...

  9. JQuery动态操作表格

    新人,小白一枚,刚刚参加工作,所以会在这里记录一些遇到的问题. 最近要做的东西,是对一个表格动态的添加行,删除行,并且对表格中内容进行非空验证. <!DOCTYPE html> <h ...

随机推荐

  1. 基于redis 实现分布式锁的方案

    在电商项目中,经常有秒杀这样的活动促销,在并发访问下,很容易出现上述问题.如果在库存操作上,加锁就可以避免库存卖超的问题.分布式锁使分布式系统之间同步访问共享资源的一种方式 基于redis实现分布式锁 ...

  2. JTree实现好友列表

    最近学习了一下JTree的使用方法: 先来看一下树的实例: 构建一个树, DefaultMutableTreeNode root = new DefaultMutableTreeNode(" ...

  3. 在Mac系统中安装及配置Apache Tomcat

    1.下载Tomcat http://tomcat.apache.org/download-80.cgi 下载ZIP包,解压后放至任意地址,本例中放在/Users/GuQiang/Tomcat/apac ...

  4. LINQ函数

    LINQ函数虽然和LINQ语句实现了同样的功能,但LINQ函数使用起来更加快捷.学过数据库的感觉LINQ语句都不难,但语句比较长. 会LINQ函数,才算会LINQ. 1.Where(),结果过滤 Li ...

  5. 精通css 高级web标准解决方案——可视化格式模型-盒模型

    1-盒模型的两种标准: IE :width 和 height属性 是包括padding和border在内的. w3c:width 和 height 属性,就是单纯的内容的宽高,padding 是内容之 ...

  6. 为你的pip更换一个国内的镜像源

    为你的pip更换一个国内的镜像源 是否常常为pypi官网被无故和谐掉导致pip不能下载python的各个包而痛心疾首? 是否常常在深夜里看着pip install 下载包的速度慢如乌龟而长吁短叹? 是 ...

  7. OpenStack三种类型的NAT转换

    SNAT SNAT即源网络地址转换,这个NAT路由修改IP包包头中的源IP地址.SNAT功能通常用于让只具有私有IP地址的主机能够访问外网,比如,多个PC使用路由器共享上网,每个PC都配置了内网IP, ...

  8. git操作---更新删除

    1.更新git   git pull <远程主机名> <远程分支名> 例如:git pull origin master 2.更新子模块 git submodule updat ...

  9. JEECG 社区开源项目下载(总览)

    反馈问题板块:http://www.jeecg.org/forum.php?mod=forumdisplay&fid=153 资源1: JEECG 微云快速开发平台( JEECG 3.6.5  ...

  10. 移动开发框架剖析(二) Hammer专业的手势控制

    浏览器底层并没有给元素提供类似,单击,双击,滑动,拖动这些直接可以用的控制接口,一切的手势动作都只能通过模拟出来.移动端浏览器唯一给我们提供的就只是mousedown -> mousemove ...