温馨提示×

温馨提示×

您好，登录后才能下订单哦！

密码登录×
登录注册×
获取短信验证码
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》
登 录 注册有礼
云服务器 香港服务器 高防服务器
最新更新 网站标签 地图导航
产品

使用jQuery怎么合并表格单元格中相同的行

发布时间：2021-04-07 16:17:05 来源：亿速云 阅读：201 作者：Leah 栏目：web开发

这篇文章将为大家详细讲解有关使用jQuery怎么合并表格单元格中相同的行，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

合并的方法

$("#tableid").mergeCell({
　　cols:[X,X] ///参数为要合并的列
})
/**
* 操作表格 合并单元格 行
* 2016年12月13日16:00:41
*/
(function($) {
  // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
  // 才保留了jQuery.prototype这个形式
  $.fn.mergeCell = function(options) {
    return this.each(function() {
      var cols = options.cols;
      for ( var i = cols.length - 1; cols[i] != undefined; i--) {
       // fixbug console调试
       // console.debug(cols[i]);
       mergeCell($(this), cols[i]);
      }
      dispose($(this));
    });
  };
  // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
  // 具体可以参考本人前一篇随笔里介绍的那本书
  function mergeCell($table, colIndex) {
    $table.data('col-content', ''); // 存放单元格内容
    $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
    $table.data('col-td', $());   // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
    $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
    // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
    $('tbody tr', $table).each(function(index) {
      // td:eq中的colIndex即列索引
      var $td = $('td:eq(' + colIndex + ')', this);
      // 取出单元格的当前内容
      var currentContent = $td.html();
      // 第一次时走此分支
      if ($table.data('col-content') == '') {
        $table.data('col-content', currentContent);
        $table.data('col-td', $td);
      } else {
        // 上一行与当前行内容相同
        if ($table.data('col-content') == currentContent) {
          // 上一行与当前行内容相同则col-rowspan累加, 保存新值
          var rowspan = $table.data('col-rowspan') + 1;
          $table.data('col-rowspan', rowspan);
          // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
          $td.hide();
          // 最后一行的情况比较特殊一点
          // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
          if (++index == $table.data('trNum'))
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
        } else { // 上一行与当前行内容不同
          // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
          if ($table.data('col-rowspan') != 1) {
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
          }
          // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
          $table.data('col-td', $td);
          $table.data('col-content', $td.html());
          $table.data('col-rowspan', 1);
        }
      }
    });
  }
  // 同样是个private函数 清理内存之用
  function dispose($table) {
    $table.removeData();
  }
})(jQuery);

示例html代码

<html>
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>酒店分房表</title>
<style mce_bogus="1" type="text/css">
html, body, div, span, object, iframe, h2, h3, h4, h5, h6, h7, p, blockquote, pre, a, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, caption, tfoot, thead, th, s { margin:0; padding:0; border:0; font-size:100%; vertical-align:baseline; font-style:normal; text-decoration:none;word-wrap: break-word;}
body {font-family: SimSun;
   font-style:italic;
   font-weight:bold;
   font-size:12px;
       background:none;margin-left: auto;margin-right: auto;}
a { color:#000000; font-size:14px;line-height:26px; font-family:SimSun; text-decoration:none; }
a:hover { color:#000000; font-size:14px; line-height:26px; font-family:SimSun; text-decoration:none;}
.bt{color: #121212;font-size: 26px; line-height:80px;text-align: center;}
.A4 { margin:auto;width: 780px;}
.title {
  color: #0070C0;
}
</style>
</head>
<body>
 <div class="A4">
   <br/><br/>
   <div align="center">
     <h2><strong >酒店信息和分房表</strong></h2>
     <br/><br/>
   </div>
   <table width="780" border="1" cellspacing="0" cellpadding="20" >
     <tr>
      <td width="140" align="center"><b>居住城市</b></td>
      <td width="120" align="center"><b>入住日期</b></td>
      <td width="120" align="center"><b>离店日期</b></td>
      <td width="200" align="center"><b>酒店名称</b></td>
      <td width="200" align="center"><b>地址</b></td>
     </tr>
        <tbody>
      <tr>
        <td align="center"></td>
        <td align="center">2016-12-11</td>
        <td align="center"> 2016-12-12</td>
        <td align="center"> 性格里拉</td>
        <td align="center"> 上海</td>
      </tr>
     </tbody>
   </table>
   <br/><br/>
    <table width="780" border="1" cellspacing="0" cellpadding="20" >
     <tr>
      <td width="140" align="center"><b>房间类型</b></td>
      <td width="120" align="center"><b>双床房</b></td>
     </tr>
     <tbody>
      <tr>
        <td align="center"><b>数量共计： 5 间</b></td>
        <td align="center">5</td>
      </tr>
     </tbody>
   </table>
   <br/><br/>
   <table id="table_4" width="780" border="1" cellspacing="0" cellpadding="0" >
     <tr>
      <td width="50" align="center"><b>Room</b></td>
      <td width="50" align="center"><b>Adult</b></td>
      <td width="120" align="center"><b>中文名</b></td>
      <td width="200" align="center"><b>Name</b></td>
      <td width="50" align="center"><b>Sex</b></td>
      <td width="200" align="center"><b>Room Type</b></td>
     </tr>
      <tr>
        <td align="center">1</td>
        <td align="center">1</td>
        <td align="center"> 熊哥1</td>
        <td align="center"> xsw </td>
        <td align="center"> 女</td>
        <td align="center"> 双床房1</td>
      </tr>
      <tr>
        <td align="center">1</td>
        <td align="center">2</td>
        <td align="center"> 熊哥2</td>
        <td align="center"> xsw2222222 </td>
        <td align="center"> 男</td>
        <td align="center"> 双床房1</td>
      </tr>
      <tr>
        <td align="center">1</td>
        <td align="center">3</td>
        <td align="center"> 杰森.斯坦森</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房1</td>
      </tr>
      <tr>
        <td align="center">2</td>
        <td align="center">4</td>
        <td align="center"> 李锡龄</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房2</td>
      </tr>
      <tr>
        <td align="center">2</td>
        <td align="center">5</td>
        <td align="center"> 李孝利</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房2</td>
      </tr>
      <tr>
        <td align="center">2</td>
        <td align="center">6</td>
        <td align="center"> 刘德国</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房2</td>
      </tr>
      <tr>
        <td align="center">3</td>
        <td align="center">7</td>
        <td align="center"> 杰森.四米</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房3</td>
      </tr>
      <tr>
        <td align="center">3</td>
        <td align="center">8</td>
        <td align="center"> 凯威.斯坦森</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房3</td>
      </tr>
      <tr>
        <td align="center">3</td>
        <td align="center">9</td>
        <td align="center"> 杰森史蒂文</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房3</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">10</td>
        <td align="center"> 5</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">11</td>
        <td align="center"> 3</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">12</td>
        <td align="center"> 1</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">4</td>
        <td align="center">13</td>
        <td align="center"> 杰森.托马鞍山</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房4</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">14</td>
        <td align="center"> 孙露</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">15</td>
        <td align="center"> 李红梅</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">16</td>
        <td align="center"> 卓越杀</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">17</td>
        <td align="center"> 4</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">18</td>
        <td align="center"> 12</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
      <tr>
        <td align="center">5</td>
        <td align="center">19</td>
        <td align="center"> 16</td>
        <td align="center"> Jason Statham</td>
        <td align="center"> 男</td>
        <td align="center"> 双床房5</td>
      </tr>
   </table>
   <br/><br/>
 </div>
 </body>
 <script type="text/javascript">
 /**
 * 操作表格 合并单元格 行
 * 2016年12月13日16:00:41
 */
(function($) {
  // 看过jquery源码就可以发现$.fn就是$.prototype, 只是为了兼容早期版本的插件
  // 才保留了jQuery.prototype这个形式
  $.fn.mergeCell = function(options) {
    return this.each(function() {
      var cols = options.cols;
      for ( var i = cols.length - 1; cols[i] != undefined; i--) {
       // fixbug console调试
       // console.debug(cols[i]);
       mergeCell($(this), cols[i]);
      }
      dispose($(this));
    });
  };
  // 如果对javascript的closure和scope概念比较清楚, 这是个插件内部使用的private方法
  // 具体可以参考本人前一篇随笔里介绍的那本书
  function mergeCell($table, colIndex) {
    $table.data('col-content', ''); // 存放单元格内容
    $table.data('col-rowspan', 1); // 存放计算的rowspan值 默认为1
    $table.data('col-td', $());   // 存放发现的第一个与前一行比较结果不同td(jQuery封装过的), 默认一个"空"的jquery对象
    $table.data('trNum', $('tbody tr', $table).length); // 要处理表格的总行数, 用于最后一行做特殊处理时进行判断之用
    // 我们对每一行数据进行"扫面"处理 关键是定位col-td, 和其对应的rowspan
    $('tbody tr', $table).each(function(index) {
      // td:eq中的colIndex即列索引
      var $td = $('td:eq(' + colIndex + ')', this);
      // 取出单元格的当前内容
      var currentContent = $td.html();
      // 第一次时走此分支
      if ($table.data('col-content') == '') {
        $table.data('col-content', currentContent);
        $table.data('col-td', $td);
      } else {
        // 上一行与当前行内容相同
        if ($table.data('col-content') == currentContent) {
          // 上一行与当前行内容相同则col-rowspan累加, 保存新值
          var rowspan = $table.data('col-rowspan') + 1;
          $table.data('col-rowspan', rowspan);
          // 值得注意的是 如果用了$td.remove()就会对其他列的处理造成影响
          $td.hide();
          // 最后一行的情况比较特殊一点
          // 比如最后2行 td中的内容是一样的, 那么到最后一行就应该把此时的col-td里保存的td设置rowspan
          if (++index == $table.data('trNum'))
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
        } else { // 上一行与当前行内容不同
          // col-rowspan默认为1, 如果统计出的col-rowspan没有变化, 不处理
          if ($table.data('col-rowspan') != 1) {
            $table.data('col-td').attr('rowspan', $table.data('col-rowspan'));
          }
          // 保存第一次出现不同内容的td, 和其内容, 重置col-rowspan
          $table.data('col-td', $td);
          $table.data('col-content', $td.html());
          $table.data('col-rowspan', 1);
        }
      }
    });
  }
  // 同样是个private函数 清理内存之用
  function dispose($table) {
    $table.removeData();
  }
})(jQuery);
 $('#table_4').mergeCell({
    cols:[0,5]
  });
 </script>
</html>

运行结果：

使用jQuery怎么合并表格单元格中相同的行

关于使用jQuery怎么合并表格单元格中相同的行就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

向AI问一下细节
推荐阅读：
  1. JQuery实现相同内容合并单元格
  2. 在html中表格如何合并单元格

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

jquery

猜你喜欢

最新资讯
相关推荐

相关标签

jquery插件 jquery特效 jquery easyui jquery validate jquery幻灯片 jquery mobile jquery打印方法 jquery源码 jquery图片轮播 jquerymobile jquery时间插件 jquery ajax jquery分页 jquery弹出框 jquery入门 jquery库 jquery on jquery.js jquery not jquery.min.js
AI
助
手
产品服务
地区划分
专题活动
帮助支持
关于我们
售后咨询
7*24小时在线电话：400-100-2938
7*24小时在线 QQ：800811969
关注亿速云

亿速云公众号

手机网站二维码

Copyright © Yisu Cloud Ltd. All Rights Reserved. 2018 版权所有

广州亿速云计算有限公司粤ICP备17096448号-1 粤公网安备 44010402001142号增值电信业务经营许可证编号：B1-20181529