隱藏一個元素，但保持它的寬度，但使它的高度爲0與javascript

我想要一個複選框隱藏和顯示，當選中和未選中的ID的列表<tr>。我想在可見和隱藏時保持tr的寬度不變。但是我希望高度在隱藏時變爲0，然後在可見時再變回。隱藏一個元素，但保持它的寬度，但使它的高度爲0與javascript

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？

來源

2016-02-26 ashlar64

看看'display：block' vs'display：none'（你不需要玩高度） – Jamiec

但是，如果我使用display：none，當我再次顯示寬度時，寬度會全部搞砸。 – ashlar64

同樣的方法，只是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 
}

來源

2016-02-26 16:24:48 Nikki9696

我試過類似的東西。但是，所有下面的東西都沒有像預期的那樣向上移動。它似乎仍然在使用每一行的高度。 – ashlar64

我在想也許我需要修改每一行中我想更改的所有tds的高度？ – ashlar64

對，這不會使其他元素滑回去。看到這個線程，我用小提琴進行測試，它似乎工作正常（切換類名稱）http://stackoverflow.com/questions/34344198/how-hide-row-in-table-without-displaynone – Nikki9696

我會建議你使用CSS類用於此目的。所以當你想隱藏它時，你需要添加一個css類，它將visible屬性設置爲'hidden'，將height屬性設置爲'0px'。當你想展示它時，你可以刪除這個類。

來源

2016-02-26 16:25:05 glutengo

隱藏一個元素，但保持它的寬度，但使它的高度爲0與javascript

回答

相關問題