css - Mootools 不在隐藏的 tr 中显示 colspan td

Question

我想隐藏隐藏行中的信息，如图所示，不尊重 colspan。我有:

<table width="100%" cellpadding="0" cellspacing="0" border="1">
<tr>
    <td><div id="se">click here!!</div></td>
    <td>value 2</td>
    <td>value 3</td>
</tr>
<tr><td colspan="3" style="display:none;;">content</td></tr>

和Mootools代码

$('se').addEvent('click',function(){
    this.getParent('tr').getNext('tr').getElement('td').setStyle('display','block');
});

当我点击“点击这里!”显示隐藏行，但不显示 colspan。

请参阅此处示例:http://jsfiddle.net/Xvnhw/1/

Answer 1

这与 MooTools 无关，而是浏览器重绘之前未考虑渲染的元素。

转向使用基于 CSS 的设置，该设置在引擎解析单元格并设置正确位置后应用。

http://jsfiddle.net/Xvnhw/3/

$('se').addEvent('click',function(){
    this.getParent('tr').getNext('tr').getElement('td').removeClass('hide');    
});

和CSS

.hide {
    display: none
}

又一个说明为什么内联元素样式是坏事的例子。