在HR休息時設置類TD colspan

我有一個嵌套的表格排列來顯示數據。我希望嵌套表在跨越所有父表列的TD中。所以我設置了colspan。不過，我也希望用戶能夠點擊父項來隱藏/取消隱藏子數據。這在IE8中工作正常，但在FireFox和Chrome中，嵌套表忽略了colspan，並且只播種在第一列中。在HR休息時設置類TD colspan

下面的代碼是一個問題的例子。如果你點擊第一欄文字，你會看到我的意思。最後一行數據沒有分類，因此它在頁面加載時顯示正常，但一旦設置了類，它又會出錯。

有什麼想法？

謝謝。

<!DOCTYPE html PUBLIC "-//W3C//thD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/thD/xhtml1-transitional.thd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1"> 
<script type="text/javascript"> 
function expandRow(rowID, clickRow) 
{ 
    var item = document.getElementById(rowID); 
    if(item.className=='hidden'){ 
     item.className = 'unhidden'; 
    }else{ 
     item.className = 'hidden'; 
    } 
} 
</script> 
<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display: block; } 
</style> 
<title>Table Test</title> 
</head> 
<body> 
<table> 
    <thead> 
    <tr> 
     <th>Col1</th> 
     <th>Col2</th> 
     <th>Col3</th> 
     <th>Col4</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id30', this);">Click Here to Expand</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
    </tr> 
    <tr class="hidden" id="id30"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id95', this);">Click Here to Expand</td> 
     <td>data1</td> 
     <td>data2</td> 
     <td>data3</td> 
    </tr> 
    <tr class="hidden" id="id95"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    <tr> 
     <td class="collapsed" onclick="expandRow('id96', this);">Click Here to Expand</td> 
     <td>This one</td> 
     <td>displays ok</td> 
     <td>until you set the class!</td> 
    </tr> 
    <tr id="id96"> 
     <td colspan="4"> 
     <table> 
      <tbody> 
      <tr> 
       <td>data1</td> 
       <td>data2</td> 
       <td>data3</td> 
       <td>data4</td> 
       <td>data5</td> 
      </tr> 
      </tbody> 
     </table> 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

來源

2009-09-01 javadeveloper

完全刪除您沒有隱藏類的這一部分 - 它是完全多餘的。而不是僅僅從元素刪除隱藏類，允許它返回到它的自然狀態，在這種情況下：

item.className = '';

但通常我會建議更換：

item.className = item.className.replace(/\bhidden\b/gi,'');

（和FWIW，我個人覺得「刪除」更多的語義正確比「隱藏」，我會保留處理可見性屬性）

來源

2009-09-01 16:12:54 annakata

謝謝。這個解決方案非常明顯，我可能很尷尬，因爲在發佈之前我沒有想到它。你對使用隱藏刪除的評論也是有道理的，所以我會在同一時間進行排序。 – javadeveloper 2009-09-02 09:17:21

變化有關取消隱藏的CSS行：.unhidden { display: table-row; }

塊是TRS無效的風格。

來源

2009-09-01 16:07:57

如果您這樣做，.unhidden類僅對某些元素類型有用，而舊版瀏覽器將無法識別該值。最好保留一般類的一般用處。 – annakata 2009-09-01 16:21:10

只更改CSS

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { display:; } 
</style>

來源

2009-09-01 16:10:05

這是*所以*不會解析，你只是得到沒有規則的效果 – annakata 2009-09-01 16:11:04

爲什麼你不完全刪除樣式：

<style type="text/css"> 
.hidden { display: none; } 
.unhidden { } 
</style>

來源

2009-09-01 16:24:04 Keith

我解決下，僅僅通過聲明

.vis { 
    display: block; 
    display: table-row; 
}

舊互聯網探索者忽略table-row使用該信息。 Firefox和Internet Explorer 8使用它。

來源

2010-09-27 19:05:27 user459835

在HR休息時設置類TD colspan

回答

相關問題