<!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合并表格中相同文本的相邻单元格的更多相关文章

  1. 使用jquery合并表格中相同文本的相邻单元格

    一.效果 二.代码 <!DOCTYPE HTML> <html> <head> <title>Example</title> <met ...

  2. jQuery合并同一列中相同文本的相邻单元格

    一.效果图 二.在html的head中引入jQuery <script language="javascript" src="${pageContext.reque ...

  3. 合并table中某一列相邻的相同的行

    合并table中某一列相邻的相同的行​1. [代码]合并table中某一列相邻的相同的行  <!DOCTYPE html><html>    <head>      ...

  4. JQuery合并表格单元格

    转:http://www.cnblogs.com/xuguoming/p/3412124.html JQuery合并表格单元格   一.需求 如果存在一个表格,想把其中某一列内容相同的部分合并单元格, ...

  5. Java 读取Word表格中的文本和图片

    本文通过Java程序来展示如何读取Word表格,包括读取表格中的文本和图片.下面是具体实现的步骤和方法. 1. 程序环境准备 代码编译工具:IntelliJ IDEA Jdk版本:1.8.0 测试文档 ...

  6. Excel表格中无法中间插入新行列！ 提示：在当前工作表的最后一行或列中，存在非空单元格，解决方案

    excel中新增行列时报错: 提示:在当前工作表的最后一行或列中,存在非空单元格,所以无法插入新行或新列.

  7. Swift - 可编辑表格样例（可直接编辑单元格中内容、移动删除单元格）

    (本文代码已升级至Swift3)   本文演示如何制作一个可以编辑单元格内容的表格(UITableView). 1,效果图 (1)默认状态下,表格不可编辑,当点击单元格的时候会弹出提示框显示选中的内容 ...

  8. VUE-003-前端表格数据展示时，设置单元格（el-table-column）保留空格和换行

    在使用 el-table 展示数据时,单元格中的数据有可能存在空格和换行符,若不进行设置,浏览器默认会取消空格和换行符,如下所示: 解决方法: 将单元格的样式 “white-space” 属性设置为“ ...

  9. [Xcode 实际操作]五、使用表格-(6)UITableView滑动到指定单元格

    目录:[Swift]Xcode实际操作 本文将演示如何使表格滑动到指定的索引路径. 在项目导航区,打开视图控制器的代码文件[ViewController.swift] import UIKit //首 ...

随机推荐

  1. Jenkins部署java项目实例02

    源码管理 选择 “git”, Repository URL填写你的git地址,并配置对应的key,大家最好事前先在jenkins这台机器上能够直接远程git操作私有仓库 构建触发器.构建环境.Pre ...

  2. 最大似然估计（MLE）与最大后验概率（MAP）

    何为:最大似然估计(MLE): 最大似然估计提供了一种给定观察数据来评估模型参数的方法,即:“模型已定,参数未知”.可以通过采样,获取部分数据,然后通过最大似然估计来获取已知模型的参数. 最大似然估计 ...

  3. Mysql导入大SQL文件数据问题

    如果sql文件过大,会出现mysql out of memory  (Needed XXX bytes) ,或者 "MySQL server has gone away"问题; 另 ...

  4. 腾讯QQ的发展与未来

    http://wenku.baidu.com/view/15166ddfc1c708a1284a447d.html 腾讯QQ的发展与未来

  5. DropDownList 添加“请选择”

    this.DDLUsers.Items.Insert(0, new ListItem("", ""));

  6. autoHotKey 一些脚本积累

    新建test.ahk,然后运行即可. #InstallKeybdHook #Persistent Hotstring("EndChars", "`n") ; 设 ...

  7. npm stripts 使用指南

    Node 开发离不开 npm,而脚本功能是 npm 最强大.最常用的功能之一. 本文介绍如何使用 npm 脚本(npm scripts). 一.什么是 npm 脚本? npm 允许在package.j ...

  8. 我写的websocket推送例子，每隔5秒服务器向客户端浏览器发送消息(node.js和浏览器)

    node.js服务端 先要安装ws模块的支持 npm install ws 服务端(server.js) var gws; var WebSocketServer = require('ws').Se ...

  9. unity, standard shader消耗两个draw call

    假设场景中只放一个球,关掉阴影和skybox,球体使用Unlit/Texture shader,则draw call数为2(背景占一个draw call,球占一个draw call). 相同情况下若将 ...

  10. ACdream 1084 寒假安排(阶乘素因子分解)

    题目链接:传送门   分析: 求A(n,m)转化成k进制以后末尾0的个数.对k素因子分解,第i个因子为fac[i], 第i个因子的指数为num[i],然后再对n的对A(n,m)进行素因子分解,设cou ...