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 ...
随机推荐
- Python 爬虫 解决escape问题
爬取某个国外的网址,遇到的编码问题 ,在前段页面 返回的数据是 亞洲私人珍藏賣,令仝好分享他為此 所傾注的心血與熱愛。 爬虫源码是: url = 'http://www.bonhams.com/auc ...
- [MeetCoder] Count Pairs
Count Pairs Description You are given n circles centered on Y-aixs. The ith circle’s center is at po ...
- SSO单点登录的发展由来以及实现原理
单点登录以及权限,在很早之前都有写过,不过都比较简单,今天就具体说一下,以及下一步要做的 1.web单系统应用 早期我们开发web应用都是所有的包放在一起打成一个war包放入tomcat容器来运行的, ...
- 【Unity】4.3 地形编辑器
分类:Unity.C#.VS2015 创建日期:2016-04-10 一.简介 Unity拥有功能完善的地形编辑器,支持以笔刷绘制的方式实时雕刻出山脉.峡谷.平原.高地等地形.Unity地形编辑器同时 ...
- android源码上面开发App
使用eclipse 打开源码:http://blog.csdn.net/androidlover1991/article/details/17011991 使用android studio 打开源码h ...
- 期权、RSU的区别与行权事宜
科普一下常见的股票.期权.股票增值权.虚拟股票等常见的激励方式,以及在兑换或行权的一些相关问题.股票(Stock): 股票市场也称权益市场,是专门对股票进行公开交易的市场,包括股票的发行和转让,分为一 ...
- layer-list:Android中layer-list使用详解
使用layer-list可以将多个drawable按照顺序层叠在一起显示,默认情况下,所有的item中的drawable都会自动根据它附上view的大小而进行缩放, layer-list中的item是 ...
- CNN卷积可视化与反卷积
1.<Visualizing and Understanding Convolutional Networks> 2.<Adaptive deconvolutional networ ...
- Capterra Software Categories
https://www.capterra.com/categories this software categories is valuable.
- oracle sql合计结果信息使用分组的小问题
--月统计 Select SUBSTR(t.BalanceDate,1,6) as Mon, t.RechargeType , SUM(t.SumNum) as SumNum , SUM(t.SumF ...