3

我想隐藏隐藏行中的信息，如不尊重 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/

4

2 回答 2

2

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

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

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

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

和CSS

.hide {
    display: none
}

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

于 2013-09-24T19:58:50.863 回答
0

这与内联样式无关，与显示值有关。显示样式应设置为“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 的设置，将显示值设置为“块”：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' 的问题，而不是由于内联样式。

于 2013-09-25T15:09:47.687 回答