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
}

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

Answer 2

这与内联样式和显示值的所有内容无关。显示样式应设置为“table-cell”，而不是“block”。

这是原始代码，唯一的变化是将显示值设置为'table-cell'： http://jsfiddle.net/L2zz3/

HTML：

<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>
</table>

Mootools代码：

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

});

请注意此示例如何具有内联样式并且仍然有效。

这是一个基于CSS的设置，将显示值设置为'block'： http://jsfiddle.net/z7hXc/

HTML：

<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" class="hide">content</td></tr>
</table>

Mootools代码：

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

});

CSS：

.hide {
    display:none;
}
.show {
    display:block;
}

请注意此示例与原始代码具有相同的问题，但不使用任何内联样式。因此，这显然是'display'的问题：'block'，而不是由于内联样式。

Mootools不显示隐藏的colspan td

2 个答案: