封装代码:

jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件
return this.each(function () {
var that;
$('tr', this).each(function (row) {
$('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
if (that != null && $(this).html() == $(that).html()) {
rowspan = $(that).attr("rowSpan");
if (rowspan == undefined) {
$(that).attr("rowSpan", 1);
rowspan = $(that).attr("rowSpan");
}
rowspan = Number(rowspan) + 1;
$(that).attr("rowSpan", rowspan);
$(this).hide();
} else {
that = this;
}
});
});
});
}

  调用方式:

$("#ceshi").rowspan(0); //.rowspan(0)从0即第一列开始

  2纯js写法:

function hb(){
var tab = document.getElementById("subtable");
var maxCol = 3, val, count, start;
var ys="";
for(var col = maxCol-1; col >= 0 ; col--) {
count = 1;
val = "";
for(var i=0; i<tab.rows.length; i++){
if(val == tab.rows[i].cells[col].innerHTML){
count++;
}else{
if(count > 1){
//合并
start = i - count;
if(ys=="#00FFFF"){
ys="#EEEE00";
}else{
ys="#00FFFF";
}
tab.rows[start].cells[col].rowSpan = count;
tab.rows[start].cells[1].style.backgroundColor=ys;//改变颜色
// ys="#EEEE00";
// tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色
for(var j=start+1; j<i; j++){ //
tab.rows[j].cells[col].style.display = "none";
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
count = 1;
}
val = tab.rows[i].cells[col].innerHTML;
}
} if(count > 1 ){ //合并,最后几行相同的情况下
start = i - count;
tab.rows[start].cells[col].rowSpan = count;
for(var j=start+1; j<i; j++) {
tab.rows[j].removeChild(tab.rows[j].cells[col]);
}
}
}
}

第一种方法,仅用20行代码就可实现该功能,而且封装在jq库里面,其他页面可以直接调用。也就是说,其他页面只需一行代码就可实现该功能。即$("#ceshi").rowspan(0); 
比起第一种,第二种方法比较复杂,而且会把tabel里面所有相同列都合并,不实用。而且要改成仅合并第一列的话也不太好实现。但是思路可以学习一下。

封装Jquery 合并table中任何同列数据的更多相关文章

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

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

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

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

  3. jQuery遍历Table表格的行和列

    遍历Table表格的行和列,在开发中比较常用的功能,特别是前端开发人员,不多说,直接上代码,下面代码只是弹出第一列字段,请各位自己根据需求修改和扩展! <!DOCTYPE html PUBLIC ...

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

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

  5. jQuery 在Table中选择input之类的东西注意事项

    jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"> <tr& ...

  6. jQuery遍历table中的tr td并获取td中的值

    jQuery遍历table中的tr td并获取td中的值 $(function(){ $("#tableId tr").find("td").each(func ...

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

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

  8. C# 获取ListView中选中行中对应的列数据

    C# 获取ListView中选中行中对应的列数据 ) { ListView.SelectedIndexCollection c = MediaList.SelectedIndices; ]].SubI ...

  9. Excel中的一列数据变成文本的一行数据

    Excel中的一列数据变成文本的一行数据 作者:凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/

随机推荐

  1. java 中对对象的调用

    java程序设计语言对对象采用的不是引用的调用,实际上对象引用进行的是值得传递.(from:核心卷1  page:123)

  2. 用VSCode开发一个基于asp.net core 2.0/sql server linux(docker)/ng5/bs4的项目(2)

    第一部分: http://www.cnblogs.com/cgzl/p/8478993.html 为Domain Model添加约束 前一部分, 我们已经把数据库创建出来了. 那么我们先看看这个数据库 ...

  3. 情景linux--shell如何实现多线程?

    情景linux--shell如何实现多线程? 情景 shell脚本的执行效率虽高,但当任务量巨大时仍然需要较长的时间,尤其是需要执行一大批的命令时.因为默认情况下,shell脚本中的命令是串行执行的. ...

  4. this指针随笔

    在类中,非常量成员函数中,this指针为指向非常量的常量指针Class* this const 在常量成员函数中,this指针为const class* this const,为指向常量的常量指针

  5. js中的Object.defineProperty()和defineProperties()详解

    ECMAS-262第5版在定义只有内部采用的特性时,提供了描述了属性特征的几种属性.ECMAScript对象中目前存在的属性描述符主要有两种,数据描述符(数据属性)和存取描述符(访问器属性),数据描述 ...

  6. NLP+VS=>Image Caption︱自动生成图像标题技术论文+相关项目

    读聪明人的笔记,是不是也能变聪明呢? Image Caption是一个融合计算机视觉.自然语言处理和机器学习的综合问题,它类似于翻译一副图片为一段描述文字. Image Caption问题可以定义为二 ...

  7. vc6.0转vs2005中字符串的问题

    简单一点:就是project->Property->Configuration Property-->general-->Character Set:No Set即可.详细分析 ...

  8. jsp页面报错(一)

    jsp页面报错 1.错误位置 <form action="../page/areaType.action" method="POST"> <j ...

  9. Java中的a++和++a的区别

    1.a++和++a的区别 a++表示先将a放在表达式中运算,然后再加1: ++a表示先将a加1,然后再放在表达式中运算 2.实例 (1)Java代码 /** * @Title:JiaJia.java ...

  10. EntityFramework Core 2.0 Explicitly Compiled Query(显式编译查询)

    前言 EntityFramework Core 2.0引入了显式编译查询,在查询数据时预先编译好LINQ查询便于在请求数据时能够立即响应.显式编译查询提供了高可用场景,通过使用显式编译的查询可以提高查 ...