动态折叠多行时带有行跨度的 IE7（底部有额外空间）

Question

我正在尝试使用 Javascript 动态隐藏/取消隐藏多个表格行来模拟折叠/展开。以下是相关代码sn-ps：

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 中，第一次隐藏任何行后，当它被取消隐藏时，它会在底部附加一些额外的空间。不使用行跨度时不会发生这种情况。我尝试了很多东西，但无法摆脱多余的空间。

如果有人能给我一些提示，我将不胜感激。

Answer 1

您是否尝试使用 block 代替空字符串？

你应该尝试使用

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

如果失败了，你应该尝试

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

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

告诉我这是否适合你