合并table中某一列相邻的相同的行
​1. [代码]合并table中某一列相邻的相同的行  
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>RunJS</title>
    <script id="jquery_183" type="text/javascript" class="library" src="http://sandbox.runjs.cn/js/sandbox/jquery/jquery-1.8.3.min.js"></script>
    <!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
    font-family: verdana,arial,sans-serif;
    font-size:11px;
    color:#333333;
    border-width: 1px;
    border-color: #999999;
    border-collapse: collapse;
}
table.hovertable th {
    background-color:#c3dde0;
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
table.hovertable tr {
    background-color:#d4e3e5;
}
table.hovertable td {
    border-width: 1px;
    padding: 8px;
    border-style: solid;
    border-color: #a9c6c9;
}
</style>
<script>
$(function(){
    $("table tr").live("mouseover",function(){
        $(this).css("backgroundColor","#ffff66");
    })
    $("table tr").live("mouseout",function(){
        $(this).css("backgroundColor","#d4e3e5");
    })
    hebingRows(2);
})
function hebingRows(col){
    var trs = $("table tr");
    var rows = 1;
    for(var i=trs.length;i>0;i--){
        var cur = $($(trs[i]).find("td")[col]).text();
        var next = $($(trs[i-1]).find("td")[col]).text();
        if(cur==next){
            rows++;
            $($(trs[i]).find("td")[col]).remove();
        } else {
            $($(trs[i]).find("td")[col]).attr("rowspan",rows);
            rows=1;
        }
    }
}
</script>
    </head>
    <body>
        <!-- Table goes in the document BODY -->
<table class="hovertable">ppt素材
<tr>http://www.huiyi8.com/ppt/​
    <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr >
    <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr >
    <td>Item 2A</td><td>Item 2B</td><td>Item 1C</td>
</tr>
<tr >
    <td>Item 3A</td><td>Item 2B</td><td>Item 1C</td>
</tr>
<tr >
    <td>Item 4A</td><td>Item 4B</td><td>Item 2C</td>
</tr>
<tr >
    <td>Item 5A</td><td>Item 5B</td><td>Item 2C</td>
</tr>
<tr >
    <td>Item 4A</td><td>Item 5B</td><td>Item 3C</td>
</tr>
<tr >
    <td>Item 5A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr >
    <td>Item 4A</td><td>Item 5B</td><td>Item 4C</td>
</tr>
<tr >
    <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>
    </body>
</html>
​

合并table中某一列相邻的相同的行的更多相关文章

  1. 封装Jquery 合并table中任何同列数据

    封装代码: jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件 return this.each(function () { va ...

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

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

  3. JavaScript实现获取table中某一列的值

    JavaScript实现获取table中某一列的值 1.实现源代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional/ ...

  4. JavaScript获取table中某一列的值的方法

    1.实现源码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

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

    <!DOCTYPE HTML> <html> <head>   <title>Example</title>   <meta char ...

  6. 给table中某一列的文字右对齐

    一般来说,没写过jquery的前端人员,肯定是定义一个class,给每一行的那列加上align_r{text-align:right}.这是很麻烦的. 所以用jquery来写,可以$("ta ...

  7. 关于页面中table中相同的列自动合并

    代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. 使用js合并table中的单元格

    用primefaces做的报表,领导要求合并相同内容的单元格,但是primefaces没有找到可以合并单元格的组件,想来想去,只有页面加载后用js合并了. http://blog.csdn.net/d ...

  9. HTML锁定Table中某一列

    1. 2. 3. function ChangeTable() { var type = document.getElementById("ddl_ReportType").val ...

随机推荐

  1. css样式---隐藏元素

    1.通过设置width:0;或height:0 2.将元素的opacity设置成0 3.通过定位将元素移出屏幕范围 4.通过text-indent实现隐藏文字的效果 5.通过z-index隐藏一个元素 ...

  2. php——数据库操作之规范性

    今天在写一个项目,上传到服务器的时候出现500的错误,找了半天最后是因为数据库更新数据的语句写的不规范, 询问同事之后,同事说,数据库的增删改查语句写的不规范的时候有的时候会报错有的时候不会: 所以总 ...

  3. rman备份OBSOLETE和EXPIRED参数来历及区别

    http://blog.itpub.net/30496894/viewspace-2096221/

  4. (45)C#网络3 socket

    一.TCP传输 using System.Net.Sockets; 1.最基本客户端连服务器 服务端运行后一直处于监听状态,客户端每启动一次服务端就接收一次连接并打印客户端的ip地址和端口号.(服务端 ...

  5. Oracle 12c PDB和CDB全局用户权限问题

    Oracle12c版本中引入了新的CDB和PDB 默认登陆CDB后创建的用户为全局用户必须以c##开头 如果要访问CDB中的表,可以用GRANT命令赋权 但是上面的赋权并不会再PDB中生效 如果要这个 ...

  6. Opengl配置

    Opengl配置说明: 本配置文档针对windows64位操作系统,配置vs2008项目工程 1.下载OpenGL的glut类库:http://www.opengl.org/resources/lib ...

  7. for 循环进化史

    ECMAScript 6已经逐渐普及,经过二十多年的改进,很多功能也有了更成熟的语句,比如 for 循环 这篇博客将介绍一下从最初的 for 循环,到 ES6 的 for-of 等四种遍历方法 先定义 ...

  8. [Oracle] 获取运行计划的各方法总结

    总的结论: 一.获取运行计划的6种方法(具体步骤已经在每一个样例的开头凝视部分说明了): 1. explain plan for获取:  2. set autotrace on .  3. stati ...

  9. 【C语言天天练（九）】动态内存分配

    引言:数组的元素存储于内存中连续的位置上.当一个数组被声明时.它所须要的内存在编译时就被分配. 可是,我们能够使用动态内存分配在执行时为它分配内存. 一块内存的生命周期能够分为四个阶段:分配.初始化. ...

  10. [LeetCode][Java] Longest Common Prefix

    题目: Write a function to find the longest common prefix string amongst an array of strings. 题意: 写出一个函 ...