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

更新时间：2015年07月17日 10:23:52 投稿：hebedich

这篇文章主要介绍了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>

测试使用了一下，很赞！

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

您可能感兴趣的文章:

jQuery中的height innerHeight outerHeight区别示例介绍
这篇文章主要介绍了jQuery中的height innerHeight outerHeight的区别,需要的朋友可以参考下
2014-06-06
jQuery设置下拉框显示与隐藏效果的方法分析
这篇文章主要介绍了jQuery设置下拉框显示与隐藏效果的方法,结合实例形式分析了jQuery针对页面元素的事件响应与属性动态操作相关使用技巧,需要的朋友可以参考下
2019-09-09
jquery.autocomplete修改实现键盘上下键自动填充示例
根据需求要实现通过键盘上下移动，获得联想菜单中的值，如同google baidu的查询功能，下面的代码是自己手写的，喜欢的朋友可以尝试操作下
2013-11-11
zTree节点文字过多的处理方法
这篇文章主要为大家详细介绍了zTree节点文字过多的处理方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-11-11
jQuery选择器的工作原理和优化分析
至于有那些选择器，在帮助手册中都有，自己去看，这篇主要是分析他的工作原理，而优化我们写的选择器，尤其在页面内容很多的情况下，更应该需要优化。下边就言归正传。
2011-07-07
js过滤HTML标签以及空格的思路及代码
今天要做一个应用--判断编辑器中文字的个数。如果少如20个字就不能让其提交。没多想，正好周末的时候看了一下js中正则表达式的内容。很容易就想到了要用正则表达式来解决这个问题。虽说看了正则表达式的内容是看了，但是毕竟还是刚接接触，连基本的概念都很模糊，于是只好在网上找到如下的代码：
2013-05-05
jQuery使用正则验证15/18身份证的方法示例
这篇文章主要介绍了jQuery使用正则验证15/18身份证的方法,涉及jQuery基于正则进行数字字符串验证相关操作技巧,需要的朋友可以参考下
2017-04-04
jQuery取得select选择的文本与值的示例
取得select选择的文本与值的情形在很多地方都有用到，且实现的方法有很多，在下面的示例中将为大家详细介绍下jquery是如何做到的
2013-12-12
jQuery实现鼠标经过提示信息的地图热点效果
这是一个升级版本，更新了一个在IE8里的小问题，加入了提示框的内容自动换行处理(北京点上有演示)！估计差不多该是最后样式了。IE6、IE8、谷歌、火狐、测试正常。
2015-04-04
jQuery实现的简单提示信息插件
这篇文章主要介绍了jQuery实现的简单提示信息插件,涉及jQuery插件扩展的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-12-12

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具