JQuery Table 合并单元格-解决Bug版本
网络中提供的方法是:
<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版本的更多相关文章
- css table 合并单元格
1. css table 合并单元格 colspan:合并列, rowspan:合并行, 合并行的时候,比如rowspan="2",它的下一行tr会少一列: 合并列的时候,比如co ...
- table中tr间距的设定table合并单元格 colspan(跨列)和rowspan(跨行)
table中的tr的默认display:table-row,虽然可以修改为display:block但是就失去了tr特有的显示效果,如(td自动对齐): 并且在tr中对起设定padding是有用的,可 ...
- table合并单元格
table合并单元格 新建一张表格.要求表格有四行四列,当中第一行的四列合并,第二行.第三行和第四行的第一列合并 <!DOCTYPE html PUBLIC "-//W3C//DTD ...
- ant design Table合并单元格合并单元格怎么用?
1.ant design table合并单元格怎么用?
- BootStrap Table 合并单元格
为了更直观展示表格的一大堆乱七八糟的数据,合并单元格就派上用场: 效果: 贴上JSON数据(后台查询数据一定要对合并字段排序): [ { "city": "广州市&quo ...
- 一种HTML table合并单元格的思路
/** * 合并单元格 * @param table1 表格的ID * @param startRow 起始行 * @param col 合并的列号,对第几列进行合并(从0开始).如果传下来为0就是从 ...
- table合并单元格colspan和rowspan .
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
- table合并单元格 colspan(跨列)和rowspan(跨行)
colspan和rowspan这两个属性用于创建特殊的表格. colspan是“column span(跨列)”的缩写.colspan属性用在td标签中,用来指定单元格横向跨越的列数: 在浏览器中将显 ...
- Html table 合并单元格
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- Java数据结构和算法(六):前缀、中缀、后缀表达式
前面我们介绍了三种数据结构,第一种数组主要用作数据存储,但是后面的两种栈和队列我们说主要作为程序功能实现的辅助工具,其中在介绍栈时我们知道栈可以用来做单词逆序,匹配关键字符等等,那它还有别的什么功能吗 ...
- Android 4.1的新特性介绍
原文:http://android.eoe.cn/topic/summary 果冻豆 - Android 4.1 通知系统 - Notifications 在Android 4.1系统上通知的功能大大 ...
- 腾讯云服务器 Centos6.5 安装 nginx1.12.0
今天买了腾讯云,不要问我为什么没有买阿里云... 入正题: 如果出现 CentOS ping: unknown host 的话,表示没有配置dns vim /etc/sysconfig/network ...
- JAVA中INSTANCEOF关键字的用法总结
https://www.cnblogs.com/jay36/p/7519145.html https://www.cnblogs.com/zjxynq/p/5882756.html https://b ...
- 每日英语:Surviving a Conference Call
The conference call is one of the most familiar rituals of office life -- and one of the most hated. ...
- linux命令(46):批量更改文件后缀,文件名
linux shell 1.要将所有 jpeg的后缀名图片文件修改为 jpg文件. rename .jpeg .jpg *.jpeg
- [iOS]终极横竖屏切换解决方案
[iOS]终极横竖屏切换解决方案 大家的项目都是只支持竖屏的吧?大多数朋友(这其中当然也包括博主),都没有做过横屏开发,这次项目刚好有这个需求,因此把横竖屏相关的心得写成一遍文章供诸位参考. 01.综 ...
- 21、uwp UI自动化测试(WinAppDriver)
使用 UI自动化测试的好处就是在代码逻辑中写好 case 后,来实现 “一劳永逸” 的作用,并且自动化测试能够模拟人工达不到要求,比如快速切换页面.快速点击按钮等,对于提高软件的稳定性很有帮助. 安装 ...
- convert2utf8withbom
很久以前给同事要的转码bash 当时windows和mac总是出现中文注释乱码的情况,让人心塞的难过.又因为是老项目,现有源码太多了,不可能改模板重新创建.只能跑一遍这个玩意儿了…… #!/bin/b ...
- 【Mysql】linux连接mysql错误解决方案
1.源码 //connect-mysql.c #include <stdio.h> #include "/usr/include/mysql/mysql.h" int ...