Question

我会列出一些<tr>的ID，我希望隐藏这个复选框，并在选中和取消选中时显示。我希望在可见和隐藏时保持tr的宽度不变。但是我希望高度在隐藏时变为0，然后在可见时再次返回。

function ShowFutureMS(checkboxMS)
{
    var count = 0;

    for(count = 0; count < listofAddressesWithNoMS.length; count++)
    {
        if(chkShowFutureMaidServices.checked)
        {
            document.getElementById(listofAddressesWithNoMS[count]).style.visibility = 'hidden';
        }
        else
        {
            document.getElementById(listofAddressesWithNoMS[count]).style.visibility = 'visible';
        }
    }
}

我的代码目前隐藏了tr，并按照我想要的方式保持宽度。但是当隐藏时，高度保持不变。如何修改我的代码以在隐藏时将高度设置为0？

Answer 1

同样的方式，只有set height。

    function ShowFutureMS(checkboxMS)
    {
        var count = 0;

        for(count = 0; count < listofAddressesWithNoMS.length; count++)
        {
            if(chkShowFutureMaidServices.checked)
            {
                document.getElementById(listofAddressesWithNoMS[count]).style.visibility = 'hidden';
document.getElementById(listofAddressesWithNoMS[count]).style.height= '0px';
            }
            else
            {
                document.getElementById(listofAddressesWithNoMS[count]).style.visibility = 'visible';
document.getElementById(listofAddressesWithNoMS[count]).style.height= 'auto';
            }
        }
    }

编辑：问题实际上是其他行不会向上滑动。以下是使用类来执行此操作的示例。 Taken from answer here

HTML：

<table style="border-spacing:0">
<tr><td>test data 1</td></tr>
<tr id="hideme"><td>test data 2</td></tr>
<tr><td>test data 3</td></tr>
<tr><td>test data 4</td></tr>
</table>

<input type="button" value="click me" onclick="document.getElementById('hideme').className = 'hide'" />
<input type="button" value="click me 2" onclick="document.getElementById('hideme').className = ''" />

CSS：

tr.hide, tr.hide td {
    visibility: hidden;
    height: 0;
    line-height: 0;
    font-size: 0;
    padding 0; 
    border-spacing: 0
}

Answer 2

我建议你为此目的使用css类。因此，当您想隐藏它时，添加一个css类，将visible属性设置为'hidden'，将height属性设置为'0px'。如果要显示它，则删除该类。

隐藏元素但保持其宽度，但使用javascript使其高度为0

2 个答案: