起因很简单,至少一开始我认为这是个很简单的小玩意,没想到折腾了我整整两天,所以记录下来。
一开始,手上拿到了一套网上搜到的super table可以实现固定表左和表头,刚好我的需求是需要同时实现固定表左、表头、表左相同值自动合并、自定义复杂表头合并。而这个js的一开始就说“colSpan not supported ”,于是决定自己改造一下。
表左相同值自动合并比较简单,网上也很多现成的,复杂表头的合并稍微花了点功夫,用递归实现了,不料,在最后收尾的时候出了点问题,如下:
1 | 2 |
3 | 4 |
利用js把1和2合并其实很简单
table.rows[0].cells[0].colSpan=2;
table.rows[0].cells[1].style.display="none";
结果合并后变成了这样
1 | |
3 | 4 |
也就是说
3和4的宽度丢失了!他们变得一样了!虽然我在代码中设置了
<td style="width:110px;">3</td>
<td style="width:50px;">4</td>
但是它们不生效,哪怕利用IE8的开发者工具进入后修改它的样式也是一样,设置成1000px都一样
开头认为是由于1的宽度没有设置的原因,于是设置1的宽度为3和4的offsetWidth之和,不行,虽然它们在调试的时候,数值的确是110和50
因此我怀疑是由于隐藏单元个导致offsetWidth表现不一致,接着我弃用了
table.rows[0].cells[1].style.display="none";
改用
table.rows[0].deleteCell(1);问题依然一样
最后发现在table中定义了样式width:1px,禁用后,一切正常,IE7、8下均能在动态合并后保持子行的宽度不丢失。
问题是解决了,可是原理不懂,特此记录。