Question

我正在尝试使用Javascript动态隐藏/取消隐藏多个表行以模仿崩溃/展开。这里有相关的代码片段：

function selectionFilter(check, filter){
        var elem = document.getElementById('myScrollTable').rows;
        for(i = 0; i < elem.length; i++){
            var type = elem[i].getAttribute('type');
            if(type== filter){
                if(check == true){
                    elem[i].style.display='';
                }else{
                    elem[i].style.display='none';
                }
            }
        }
    }

以下是HTML示例：

    <input type="checkbox" checked="true" value="t1" onclick="selectionFilter(this.checked, this.value);">some type 1</input >
<input type="checkbox" value="t2" onclick="selectionFilter(this.checked, this.value);">some type 2</input ><br><br>
<table cellspacing="1" cellpadding="2" class="" id="myScrollTable">
    <thead>
        <tr>
            <th>Data1</th>
            <th>Data2</th>
        </tr>
    </thead>

    <tbody>
        <tr type="t1">
            <td rowspan="50"><a href="something1">something1</a></td><td><a href="something2">something2</a></td>
        </tr>
        <tr type="t1">
            <td><a href="something2">something2</a></td>
        </tr>
            .
            .
        <tr type="t2" style="display:none;">
            <td rowspan="50"><a href="something1">something1</a></td><td><a href="something2">something2</a></td>
        </tr>
        <tr type="t2" style="display:none;">
            <td><a href="something2">something2</a></td>
        </tr>
            .
            .
    </tbody>
</table>

在Firefox中一切都很好。但是在IE中，在第一次隐藏任何行之后，当它被取消隐藏时，它会在底部附加一些额外的空间。不使用rowspan时不会发生这种情况。我尝试了很多东西，但无法摆脱额外的空间。

如果有人能给我一些暗示，我真的很感激。

Answer 1

您是否尝试使用阻止而不是空字符串？

你应该尝试使用

elem[i].style.display = 'block';

如果失败，你应该尝试

elem[i].style.display = 'table-row';

并且总之你应该检查w3schools文档，它真的很有用 http://www.w3schools.com/css/pr_class_display.asp

告诉你这是否适合你

IE7在动态折叠多行时具有rowspan（底部的额外空间）

1 个答案: