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

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

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

你应该尝试使用

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

，如果失败你应该尝试

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

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

告诉我这是否有效为你