說明：實現效果通過display和 visibility 實現；兩者區別 ：display隱藏不會佔用頁面位置但visibility會佔用頁面位置。
1.展示和隱藏表格 ，效果運行展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function hideTable(){
var listId = document.getElementById("listId"); //第一個列表
var listId2 = document.getElementById("listId2"); //第一個列表
var hideTableId =document.getElementById("hideTableId"); //按鈕
if(listId.style.visibility!="hidden"){
listId.style.visibility="hidden";
listId.style.display="none"; //設置不可見
hideTableId.value="展示上方列表"; //改變值
}else{
listId.style.visibility="visible";
listId.style.display="inline-table"; //展示
hideTableId.value="隱藏上方列表";
}
}
</script>
<script type="text/javascript">
</script>
</head>
<body>
<table id="listId" width="100%" border="1px" cellspacing="0px" style=" " align="center" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<br />
<table>
<tr>
<td>
<input id="hideTableId" type="button" value="隱藏上方列表" onclick="hideTable();" />
</td>
</tr>
</table>
<table id="listId2" width="100%" border="1px" cellspacing="0px" style=" " align="center" >
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
</html>