网络中提供的方法是:

<script type="text/javascript">
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;
}
}
});
}
$(document).ready(function () {
_w_table_rowspan("#HZ", 1);
_w_table_rowspan("#HZ", 2);
_w_table_rowspan("#HZ", 3);
});
</script>

但这个方式存在一个bug,纯单元格的合并,不管是不是一组的,例如下面的表格,合并出来就有问题:

1 A E    
1 A E    
1 A E    
2 B E    
2 B E    
2 B E    
3 B E    
3 C E    

如果用上面的代码合并就变成这个样子了:

1 A E    
   
   
2 B    
   
   
3    
C    

我们希望是:

1 A E    
B    
   
2 B E    
   
   
3 B E    
C    

所以只需要做少许变更便可达到目的,在合并的时候判断上下单元格值得时候携带左边的单元格一起判断:

修改后的代码如下:

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_PreObj = $(_w_table_id + " tr td:nth-child(" + (_w_table_colnum == 1 ? 1 : _w_table_colnum - 1) + ")");
_w_table_Prefirsttd = "";
_w_table_Obj.each(function (i) {
if (i == 0) {
_w_table_firsttd = $(this);
_w_table_Prefirsttd = $(_w_table_PreObj[0]);
_w_table_SpanNum = 1;
} else {
_w_table_currenttd = $(this);
if (_w_table_Prefirsttd.text() + "-" + _w_table_firsttd.text() == $(_w_table_PreObj[i]).text() + "-" + _w_table_currenttd.text()) {
if ($(_w_table_PreObj[i]).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_Prefirsttd = $(_w_table_PreObj[i]);
_w_table_SpanNum = 1;
}
}
});
}

JQuery Table 合并单元格-解决Bug版本的更多相关文章

  1. css table 合并单元格

    1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...

  2. table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)

    table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...

  3. table合并单元格

    table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...

  4. ant design Table合并单元格合并单元格怎么用?

    1.ant design table合并单元格怎么用?

  5. BootStrap Table 合并单元格

    为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...

  6. 一种HTML table合并单元格的思路

    /** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从 ...

  7. table合并单元格colspan和rowspan .

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  8. table合并单元格 colspan(跨列)和rowspan(跨行)

    colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...

  9. Html table 合并单元格

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

随机推荐

  1. 章节1:SQL语言简易入门

    一.增.删.改.查 1.增(向表格中插入数据): INSERT INTO tb_TableName(ColumnName1,ColumnName2) VALUES(ColumnValue1,Colum ...

  2. Java 8 – Filter a Map examples

    Java 8 – Filter a Map examplesFew Java examples to show you how to filter a Map with Java 8 stream A ...

  3. QT creator 编辑器快捷键

    QT creator 编辑器快捷键 一.快捷键配置方法:   进入“工具->选项->环境->键盘”即可配置快捷键.     二.常用默认快捷键:       编号 快捷键 功能 1 ...

  4. mindoc 在线文档接口系统的 docker 制作过程

    说明: mindoc 是一款在线接口文档编辑系统,百度一下就知道了.github地址:https://github.com/lifei6671/mindoc 本机:ubuntu16.04 + dock ...

  5. Socket网络编程--Libev库学习(3)

    这一小节继续讲解各个观察器(Watcher). 上一小节已经讲解了ev_io(IO可读可写观察器),ev_stat(文件属性变化观察器),ev_signal(信号处理观察器),ev_timer(定时器 ...

  6. C++文件读写 打开方式等比较全

    要求:掌握文本文件读写的方法了解二进制文件的读写方法 C++文件流:fstream // 文件流ifstream // 输入文件流ofstream // 输出文件流 //创建一个文本文件并写入信息// ...

  7. ASP.NET MVC 部分视图

    [部分视图] ASP.NET MVC 里的部分视图,相当于 Web Form 里的 User Control.我们的页面往往会有许多重用的地方,可以进行封装重用.使用 部分视图 :  1. 可以简写代 ...

  8. (原创)发布一个c++11开发的轻量级的并行Task库TaskCpp

    TaskCpp简介 TaskCpp是c++11开发的一个跨平台的并行task库,它的设计思路来源于微软的并行计算库ppl和intel的并行计算库tbb,关于ppl和tbb我在前面有介绍.既然已经有了这 ...

  9. (原创)谈谈boost.asio的异步发送

    在上一篇博文中提到asio的异步发送稍微复杂一点,有必要单独拿出来说说.asio异步发送复杂的地方在于: 不能连续调用异步发送接口async_write,因为async_write内部是不断调用asy ...

  10. 18、利用 Windows Device Portal 获取用户闪退 dump

    当 uwp在用户的电脑上发生了闪退,并且由于用户距离较远,不便于使用 VS进行远程 Debug,更不可能让用户安装 Visual Studio进行分析的时候,在用户的电脑上收集 dump 是一种有效的 ...