封装代码:

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. PHP动态编译出现Cannot find autoconf的解决方法

    wget http://ftp.gnu.org/gnu/m4/m4-1.4.9.tar.gz tar -zvxf m4-.tar.gz cd m4-/ ./configure && m ...

  2. Python 上下文管理器和else块

    最终,上下文管理器可能几乎与子程序(subroutine)本身一样重要.目前,我们只了解了上下文管理器的皮毛--Basic 语言有with 语句,而且很多语言都有.但是,在各种语言中 with 语句的 ...

  3. Java架构工程师知识图,你都知道么?

    1.工程化专题 (团队大于3个人之后,你需要去考虑团队合作,科学管理)  2.源码分析专题 (好的程序员,一行代码一个设计就能看出来,源码分析带你品味代码,感受架构)  大家可以点击加入群:69757 ...

  4. 求第k小的数 O(n)复杂度

    思路:利用快速排序的思想,把数组递归划分成两部分.设划分为x,数组左边是小于等于x,右边大于x.关键在于寻找一个最优的划分,经过 Blum . Floyd . Pratt . Rivest . Tar ...

  5. POJ - 3414 bfs [kuangbin带你飞]专题一

    状态搜索,每种状态下面共有六种选择,将搜索到的状态保存即可. d[i][j]表示状态A杯中水i升,B杯中水j升,总状态数量不会超过A杯的容量 * B杯的容量. AC代码 #include<cst ...

  6. 修长城 (区间DP)

    Time Limit: 1000 ms   Memory Limit: 256 MB Description 大家都知道,长城在自然条件下会被侵蚀,因此,我们需要修复.现在是21世纪,修复长城的事情当 ...

  7. H3C单臂路由配置

    Route配置 int g0/0.1 ip add 192.168.10.1 255.255.255.0 vlan-type dot1q vid 10 #子接口封装dot1q并分配给VLAN 10 q ...

  8. Java线程编程中isAlive()和join()的使用详解

    一个线程如何知道另一线程已经结束?Thread类提供了回答此问题的方法. 有两种方法可以判定一个线程是否结束.第一,可以在线程中调用isAlive().这种方法由Thread定义,它的通常形式如下: ...

  9. 八爪鱼采集器︱爬取外网数据(twitter、facebook)

    每每以为攀得众山小,可.每每又切实来到起点,大牛们,缓缓脚步来俺笔记葩分享一下吧,please~ --------------------------- 要想采集海外数据有两种方式:云采集+单机采集. ...

  10. 项目总结2——mybatis配置的理解

    之前的项目基本上都是用mongodb,以至于mysql相关的知识异常薄弱,这次连续一个半月的加班,总算是实际用到了mysql,也使自己对mysql了解的更多,对mybatis了解的更多,这里就说一说经 ...