tr.style.display ='none'留下煩人的空間

我有一個JavaScript函數可以去掉一些表格行。我只是想隱藏他們，因爲我想再次展示給他們。tr.style.display ='none'留下煩人的空間

我使用style.display =無這似乎工作。

tr.style.display = 'none';

當我想再次向他們展示我只要致電：

tr.style.display = '';

，並再次顯示我的錶行。工作正常。

但是，在Internet Explorer中，存在一個令人討厭的空白區域，該區域過去常常是1-2像素高。 Chrome完全隱藏了這一行。

（我無法在JSFiddle中顯示，因爲IE無法在jsfiddle中工作）。

任何人都知道這是爲什麼？

來源

2014-02-24 Oliver Watkins

哪個版本的IE？ JSFiddle在IE9以上工作正常。 –

不幸的是8.沒有辦法繞過它。 –

在IE中有沒有默認的填充行？也許如果你重置它，你將沒有更多的空白空間（你可以看看IE開發者工具並檢查你的行） – Nico

Lol你要踢自己，只是在IE8上測試了這一點，我得到了相同的，不知道爲什麼，然後我想起了舊學校的HTML ..添加到您的表。

<table cellpadding="0" cellspacing="0" border="0">

我得到的也是1px的空間，補充說，然後消失了。另外，請嘗試在樣式表中使用*來減少填充和邊距。然後添加類來控制你的表。這是我測試過的代碼。

<html><head><title></title> 
    <style> 
     * { padding:0; margin:0; } 
     .visiblerow { background:#ccc; } 
     .visiblecell { padding: 10px; margin: 10px; } 
     .hiddenrow { background:#000; display: none; } 
     .hiddencell { padding: 0px; margin: 0px; } 
    </style> 
</head> 
<body> 
    <table cellpadding="0" cellspacing="0" border="0"> 
     <tr class="visiblerow"> 
      <td class="visiblecell">test</td> 
     </tr> 
     <tr class="hiddenrow"> 
      <td class="hiddencell">hide me</td> 
     </tr> 
     <tr class="visiblerow"> 
      <td class="visiblecell">test</td> 
     </tr> 
    </table> 
</body> 
</html>

從IE8中的表標籤中刪除cellpadding，間距，邊框，你會看到1px的空間返回。現在，在定義了類的同時，您還可以創建一個很好的JavaScript函數，以便切換行上的類。

來源

2014-02-24 14:33:54 tremor

太棒了。但我不能將間距和填充設置爲零，因爲表格網格需要得到尊重。 –

爲沒有隱藏的行添加間距和填充，使用類也許.. hiddenrow＆visiblerow類。可見行類可以添加CSS填充屬性。編輯我的答案，以更好地展示這一點。 – tremor

嘗試了一切，似乎沒有任何工作。我們必須改變邏輯到服務器端。 –

tr.style.display ='none'留下煩人的空間

回答

相關問題