封装代码:

  1. jQuery.fn.rowspan = function (colIdx) { //封装JQuery同列值相同合并小插件
  2. return this.each(function () {
  3. var that;
  4. $('tr', this).each(function (row) {
  5. $('td:eq(' + colIdx + ')', this).filter(':visible').each(function (col) {
  6. if (that != null && $(this).html() == $(that).html()) {
  7. rowspan = $(that).attr("rowSpan");
  8. if (rowspan == undefined) {
  9. $(that).attr("rowSpan", 1);
  10. rowspan = $(that).attr("rowSpan");
  11. }
  12. rowspan = Number(rowspan) + 1;
  13. $(that).attr("rowSpan", rowspan);
  14. $(this).hide();
  15. } else {
  16. that = this;
  17. }
  18. });
  19. });
  20. });
  21. }

  调用方式:

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

  2纯js写法:

  1. function hb(){
  2. var tab = document.getElementById("subtable");
  3. var maxCol = 3, val, count, start;
  4. var ys="";
  5. for(var col = maxCol-1; col >= 0 ; col--) {
  6. count = 1;
  7. val = "";
  8. for(var i=0; i<tab.rows.length; i++){
  9. if(val == tab.rows[i].cells[col].innerHTML){
  10. count++;
  11. }else{
  12. if(count > 1){
  13. //合并
  14. start = i - count;
  15. if(ys=="#00FFFF"){
  16. ys="#EEEE00";
  17. }else{
  18. ys="#00FFFF";
  19. }
  20. tab.rows[start].cells[col].rowSpan = count;
  21. tab.rows[start].cells[1].style.backgroundColor=ys;//改变颜色
  22. // ys="#EEEE00";
  23. // tab.rows[i].cells[1].style.backgroundColor="#00FFFF";//改变颜色绿色
  24. for(var j=start+1; j<i; j++){ //
  25. tab.rows[j].cells[col].style.display = "none";
  26. tab.rows[j].removeChild(tab.rows[j].cells[col]);
  27. }
  28. count = 1;
  29. }
  30. val = tab.rows[i].cells[col].innerHTML;
  31. }
  32. }
  33.  
  34. if(count > 1 ){ //合并,最后几行相同的情况下
  35. start = i - count;
  36. tab.rows[start].cells[col].rowSpan = count;
  37. for(var j=start+1; j<i; j++) {
  38. tab.rows[j].removeChild(tab.rows[j].cells[col]);
  39. }
  40. }
  41. }
  42. }

第一种方法,仅用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. qdoc.exe

    qdoc.exe Usage: qdoc [options] file1.qdocconf ... # Qt文档生成器 Qt documentation generator # 设置 Options: ...

  2. nyoj49 开心的小明 01背包

    思路:dp(i, j)表示用金钱j去买前i个物品能得到的最大价值.转移方程dp(i, j) = max{dp(i-1, j), dp(i-1, j-p[i]) + p[i]*w[i]}. AC代码 # ...

  3. eclipse导入/编译hadoop源代码

    1. 确保安装好JDK和eclipse 详细教程见: http://blog.csdn.net/kangdakangdaa/article/details/11364985 2. 安装 Subclip ...

  4. iOS.Animations.by.Tutorials.v2.0汉化(三)

    第2章:Springs 在前一章中,您学习了如何创建UIKit的基本动画,包括如何提供起始值和结束值随着时间的UIKit,自动为你创建一个动画. 到目前为止,你的动画一直是单方向的流体运动.当你激活一 ...

  5. 阿里巴巴开源前端框架--Weex实践

    Weex是最近很火很NB的一个技术产品,因为本篇介绍的是怎样使用Weex的最佳实践,所以就不罗里吧嗦的夸它怎么怎么好了,感兴趣的可以访问Weex HomePage,或加入旺旺群:1330170019. ...

  6. FusionCharts Marimekko图

    1.Marimekko静态页面 Marimekko.html: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//E ...

  7. linux内核initrd文件自定义方法

    linux内核initrd文件自定义方法 重新编译内核后,可能加入了自定义的模块,就有可能需要修改init文件,而init文件就在initrd中,这里记录下操作步骤,以防遗忘. 1.  cp  /bo ...

  8. php中的单引号、双引号和转义字符

    PHP单引号及双引号均可以修饰字符串类型的数据,如果修饰的字符串中含有变量(例$name):最大的区别是: 双引号会替换变量的值,而单引号会把它当做字符串输出. 例如: <?php        ...

  9. VME总线

    简介 诞生于25年前的VME(VersaModule Eurocard)总线是一种通用的计算机总线,结合了Motorola公司Versa总线的电气标准和在欧洲建立的Eurocard标准的机械形状因子, ...

  10. DOS批处理命令递归删除给定的文件(夹),兼VC工程清理小工具

    使用dos批处理命令递归删除指定的文件(夹): (下面内容针对清理VC工程!自己按说明任意修改) 2014-06-10修改:删除前增加了[y,n]询问: echo off rem 递归删除当前文件下指 ...