更改顯示時不均勻的表格單元格無

-1

當我使用JavaScript（display：block）隱藏和顯示行時，我遇到了HTML表格的問題。我需要通過JavaScript隱藏行，但是當我重新顯示行時，我發現表格網格佈局會丟失，並且以前隱藏的行會摺疊到網格的左側。更改顯示時不均勻的表格單元格無

我的沙盒代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<style type="text/css"> 
    table { 
    } 
    .rowA { 
     background-color: #70cdb3; 
    } 
    .rowB { 
     background-color: #fff1dc; 
    } 
    .rowC { 
     background-color: #edc7ff; 
    } 
    .cell { 
     border: solid 3pt white; 
     width:25%; 
    } 
    a { 
     cursor: pointer; 
    } 
</style> 

<SCRIPT type='text/JavaScript'> 
    function hide(elemid) { 
     var elem=document.getElementById(elemid); 
     elem.style.display='none'; 
    } 

    function show(elemid) { 
     var elem=document.getElementById(elemid); 
     elem.style.display='block'; 
    } 
</SCRIPT> 
</head> 
<body> 

<table> 
<tr class='rowA'> 
    <td class='cell'> 
    <a onClick="hide('row1')">Hide Row1</a> 
    </td> 
    <td class='cell'> 
    <a onClick="show('row1')">show Row1</a> 
    </td> 
</tr> 
<tr class='rowB'> 
    <td class='cell'> 
    <a onClick="hide('row2')">Hide Row2</a> 
    </td> 
    <td class='cell'> 
    <a onClick="show('row2')">show Row2</a> 
    </td> 
</tr> 
<tr class='rowC'> 
    <td class='cell'> 
    <a onClick="hide('row3')">Hide Row3</a> 
    </td> 
    <td class='cell'> 
    <a onClick="show('row3')">show Row3</a> 
    </td> 
</tr> 
</table> 
<hr> 
<table class='table' style='width:50%'> 
<thead> 
<tr> 
    <th>ID</th> 
    <th>Name</th> 
    <th>Job</th> 
    <th>Email</th> 
</tr> 
</thead> 
<tbody> 
<tr class='rowA' id='row1'> 
    <td class='cell'>one</td> 
    <td class='cell'>Johnny Five</td> 
    <td class='cell'>Robotin'</td> 
    <td class='cell'>[email protected]</td> 
</tr> 
<tr class='rowB' id='row2'> 
    <td class='cell'>two</td> 
    <td class='cell'>Super notsolong</td> 
    <td class='cell'>Doin' stuff</td> 
    <td class='cell'>[email protected]</td> 
</tr> 
<tr class='rowC' id='row3'> 
    <td class='cell'>three</td> 
    <td class='cell'>Super Superlonglastnamesmith</td> 
    <td class='cell'>Doin' stuff</td> 
    <td class='cell'>[email protected]</td> 
</tr> 
</tbody> 
</table> 


</body> 
</html>

使用了沙盒，問題是，當我在隱藏排按鈕點擊在沙箱的頂部，然後再次顯示該行 - 那麼行細胞倒入左側。

注意，這似乎在IE 10，邊緣，瀏覽器，和Firefox發生，但不是IE9

我在做什麼錯？

由於

甲

來源

2015-11-01 user1432181

表格行默認的顯示選項是table-row，你不能使用block 。

function show(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display='table-row'; 
}

如果有疑問可以將空值設置爲display屬性，它將返回到默認值。

這也可以。

function show(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display=''; 
}

來源

2015-11-01 14:05:36

<tr>不是塊元件。因此，在表格上下文中顯示它會產生奇怪的結果。這裏的合適值是display:table-row;

入住這裏請：http://jsfiddle.net/v05nhb9y/

你的代碼應該是這樣的，那麼：

function hide(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display='none'; 
} 

function show(elemid) { 
    var elem=document.getElementById(elemid); 
    elem.style.display='table-row'; 
}

來源

2015-11-01 14:05:32

更改顯示時不均勻的表格單元格無

回答

相關問題