隱藏一個元素，但保持其寬度，但使用javascript使其高度為0

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

以同樣的方式，只需設置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';
            }
        }
    }

編輯：問題實際上是其他行不會向上滑動。 這是使用類進行此操作的示例。 取自這里的答案

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”。 要顯示它時，請刪除該類。