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 ...
随机推荐
- android数据存取的四种方式
Android系统下有四种数据的存在形式,分别是SQLite,SharePreference,File,ContentProvider.一:特性介绍:SQLite:对于大多数开发者而言,这应该是大家非 ...
- java 执行mysql 8.0.11存储过程报错The user specified as a definer ('root'@'10.%.%.%') does not exist解决办法
执行存储过程,报错 java.sql.SQLException: The user specified as a definer ('root'@'10.%.%.%') does not exist ...
- MySql(十四):MySql架构设计——可扩展性设计之数据切分
一.前言 通过 MySQL Replication 功能所实现的扩展总是会受到数据库大小的限制,一旦数据库过于庞大,尤其是当写入过于频繁,很难由一台主机支撑的时候,我们还是会面临到扩展瓶颈.这时候,我 ...
- OpenUDID 实现UDID替代
http://www.cnblogs.com/zhulin/archive/2012/03/26/2417860.html 补充:还有两个比较通用的开源解决方案: OpenUDID:https://g ...
- C#判断访问网站的设备类型
同样也是在破解版的HISHOP源码上扒出来的,代码如下: protected void InitVisitorTerminal() { VisitorTermina ...
- ios使用kvc机制简化对json的解析
在 ios开发中,我们经常需要对服务器的传回来的json进行解析,特别是对哪些字段特别多的就会又烦躁的情绪.tmd都是一样的东西,要为每个property赋值,真是累人啊.举个简单的例子吧.服务器会过 ...
- rabbitmq 二进制安装
# wget -Uvh http://dl.fedoraproject.org/pub/epel/6/x86_64/epel-release-6-8.noarch.rpm # ls epel-rele ...
- 无法加载 DLL“ParkCOM.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E) 终结者
C#调用利用C++写的dll 常遇到的情况是无法加载DLL"***.dll":找不到指定的模块(异常来自HRESULT:0x8007007E)终极解决方法如下: 1.产生原因 可能 ...
- 每日英语:Tencent Fights for China's Online Shoppers
In the war for the Chinese Internet, messaging giant Tencent is taking the battle to rival Alibaba's ...
- 【Spring】Spring,我的零散使用杂记
通过Java类设置配置信息,JavaConfig Spring常用的通过XML或者@Controller.@Servoce.@Repository.@Component等注解注册Bean,最近看Spr ...