jquery合并表格中相同文本的相邻单元格


Posted in Javascript onJuly 17, 2015

一、效果

jquery合并表格中相同文本的相邻单元格

二、代码

<!DOCTYPE HTML>
<html>
<head>
  <title>Example</title>
  <meta charset="utf-8"/>
  <style></style>
  <script src="js/jquery-2.1.4.min.js"></script>
</head>
<body>
  <table id="process" cellpadding="2" cellspacing="0" border="1">
    <thead>
      <tr >
        <td>col0</td>
        <td>col1</td>
        <td>col2</td>
        <td>col3</td>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>SuZhou</td>
        <td>11111</td>
        <td>22222</td>
        <td>SuZhouCity</td>
      </tr>
      <tr>
        <td>SuZhou</td>
        <td>33333</td>
        <td>44444</td>
        <td>SuZhouCity</td>
      </tr>
      <tr>
        <td>SuZhou</td>
        <td>55555</td>
        <td>66666</td>
        <td>SuZhouCity</td>
      </tr>
      <tr>
        <td>ShangHai</td>
        <td>77777</td>
        <td>88888</td>
        <td>ShangHaiCity</td>
      </tr>
      <tr>
        <td>ShangHai</td>
        <td>uuuuu</td>
        <td>hhhhh</td>
        <td>ShangHaiCity</td>
      </tr>
      <tr>
        <td>ShangHai</td>
        <td>ggggg</td>
        <td>ccccc</td>
        <td>ShangHaiCity</td>
      </tr>
      <tr>
        <td>GuangZhou</td>
        <td>ttttt</td>
        <td>eeeee</td>
        <td>GuangZhouCity</td>
      </tr>
      <tr>
        <td>GuangZhou</td>
        <td>ppppp</td>
        <td>qqqqq</td>
        <td>GuangZhouCity</td>
      </tr>
    </tbody>
  </table>

  <script type="text/javascript">
//函数说明:合并指定表格(表格id为_w_table_id)指定列(列数为_w_table_colnum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格的id。如在HTMl中指定表格 id="data" ,此参数应为 #data 
//参数说明:_w_table_colnum 为需要合并单元格的所在列。为数字,从最左边第一列为1开始算起。
function _w_table_rowspan(_w_table_id,_w_table_colnum){
  _w_table_firsttd = "";
  _w_table_currenttd = "";
  _w_table_SpanNum = 0;
  _w_table_Obj = $(_w_table_id + " tr td:nth-child(" + _w_table_colnum + ")");
  _w_table_Obj.each(function(i){
    if(i==0){
      _w_table_firsttd = $(this);
      _w_table_SpanNum = 1;
    }else{
      _w_table_currenttd = $(this);
      if(_w_table_firsttd.text()==_w_table_currenttd.text()){
        _w_table_SpanNum++;
        _w_table_currenttd.hide(); //remove();
        _w_table_firsttd.attr("rowSpan",_w_table_SpanNum);
      }else{
        _w_table_firsttd = $(this);
        _w_table_SpanNum = 1;
      }
    }
  }); 
}
//函数说明:合并指定表格(表格id为_w_table_id)指定行(行数为_w_table_rownum)的相同文本的相邻单元格
//参数说明:_w_table_id 为需要进行合并单元格的表格id。如在HTMl中指定表格 id="data" ,此参数应为 #data 
//参数说明:_w_table_rownum 为需要合并单元格的所在行。其参数形式请参考jQuery中nth-child的参数。
//     如果为数字,则从最左边第一行为1开始算起。
//     "even" 表示偶数行
//     "odd" 表示奇数行
//     "3n+1" 表示的行数为1、4、7、10.......
//参数说明:_w_table_maxcolnum 为指定行中单元格对应的最大列数,列数大于这个数值的单元格将不进行比较合并。
//     此参数可以为空,为空则指定行的所有单元格要进行比较合并。
function _w_table_colspan(_w_table_id,_w_table_rownum,_w_table_maxcolnum){
  if(_w_table_maxcolnum == void 0){_w_table_maxcolnum=0;}
  _w_table_firsttd = "";
  _w_table_currenttd = "";
  _w_table_SpanNum = 0;
  $(_w_table_id + " tr:nth-child(" + _w_table_rownum + ")").each(function(i){
    _w_table_Obj = $(this).children();
    _w_table_Obj.each(function(i){
      if(i==0){
        _w_table_firsttd = $(this);
        _w_table_SpanNum = 1;
      }else if((_w_table_maxcolnum>0)&&(i>_w_table_maxcolnum)){
        return "";
      }else{
        _w_table_currenttd = $(this);
        if(_w_table_firsttd.text()==_w_table_currenttd.text()){
          _w_table_SpanNum++;
          _w_table_currenttd.hide(); //remove();
          _w_table_firsttd.attr("colSpan",_w_table_SpanNum);
        }else{
          _w_table_firsttd = $(this);
          _w_table_SpanNum = 1;
        }
      }
    });
  });
}
$(document).ready(function(){ 
 // _w_table_rowspan("#process",4);
 // _w_table_rowspan("#process",3);
 // _w_table_rowspan("#process",2);
 _w_table_rowspan("#process",1);
 });
  </script>
</body>
</html>

测试使用了一下,很赞!

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
Javascript/Jquery——简单定时器的多种实现方法
Jul 03 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
浅谈js算法和流程控制
Dec 29 Javascript
jquery实现下拉框多选方法介绍
Jan 03 Javascript
node文件上传功能简易实现代码
Jun 16 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
Jul 10 jQuery
JavaScript canvas绘制折线图
Feb 18 Javascript
vue实现div单选多选功能
Jul 16 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
原生JavaScript实现刮刮乐
Sep 29 Javascript
Angular CLI发布路径的配置项浅析
Mar 29 Javascript
Vue.js中v-bind指令的用法介绍
Mar 13 Vue.js
用svg制作富有动态的tooltip
Jul 17 #Javascript
jquery实现根据浏览器窗口大小自动缩放图片的方法
Jul 17 #Javascript
JavaScript调用浏览器打印功能实例分析
Jul 17 #Javascript
JS判断页面是否出现滚动条的方法
Jul 17 #Javascript
javascript图片预加载实例分析
Jul 16 #Javascript
javascript的BOM汇总
Jul 16 #Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 #Javascript
You might like
PHP闭包(Closure)使用详解
2013/05/02 PHP
PHP间隔一段时间执行代码的方法
2014/12/02 PHP
php 生成签名及验证签名详解
2016/10/26 PHP
javascript中使用css需要注意的地方小结
2010/09/01 Javascript
jquery选择器、属性设置用法经验总结
2013/09/08 Javascript
Js表格万条数据瞬间加载实现代码
2014/02/20 Javascript
jQuery中siblings()方法用法实例
2015/01/08 Javascript
ECMA5数组的新增方法有哪些及forEach()模仿实现
2015/11/03 Javascript
基于BootStrap Metronic开发框架经验小结【二】列表分页处理和插件JSTree的使用
2016/05/12 Javascript
基于Vue生产环境部署详解
2017/09/15 Javascript
分析JS单线程异步io回调的特性
2017/12/01 Javascript
vue登录注册及token验证实现代码
2017/12/14 Javascript
vue的toast弹窗组件实例详解
2018/05/14 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
node之本地服务器图片上传的方法示例
2019/03/26 Javascript
JavaScript 面向对象基础简单示例
2019/10/02 Javascript
Python中的True,False条件判断实例分析
2015/01/12 Python
给Python的Django框架下搭建的BLOG添加RSS功能的教程
2015/04/08 Python
python基础教程之分支、循环简单用法
2016/06/16 Python
Python sorted函数详解(高级篇)
2018/09/18 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
在django中自定义字段Field详解
2019/12/03 Python
基于python实现文件加密功能
2020/01/06 Python
python不同系统中打开方法
2020/06/23 Python
python中函数返回多个结果的实例方法
2020/12/16 Python
Django中ORM的基本使用教程
2020/12/22 Python
俄罗斯外国汽车和国产汽车配件网上商店:Движком
2020/04/19 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
优秀实习自我鉴定
2013/12/04 职场文书
迟到检讨书900字
2014/01/14 职场文书
2015年元旦文艺汇演主持词
2014/03/26 职场文书
新手上路标语
2014/06/20 职场文书
安全保证书
2015/01/16 职场文书
Python中glob库实现文件名的匹配
2021/06/18 Python
Python基本的内置数据类型及使用方法
2022/04/13 Python
教你如何用cmd快速登录服务器
2022/06/10 Servers