插入的代码并没有符合HTML5样式，只是为了实现利用JS动态显示表格，并且按键的value值会同时发生变化的功能。
<!DOCTYPE >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<table width="760" border="0" cellspacing="0" cellpadding="0">
<tr >
<td bgcolor="#00CCFF">222</td>
<td bgcolor="#00CCFF">333</td>
<td bgcolor="#00CCFF">444</td>
</tr>
<tr >
<td bgcolor="#00CCFF">555</td>
<td bgcolor="#00CCFF">666</td>
<td bgcolor="#00CCFF">777</td>
</tr>
</table> <form name="form1" >
<input name="ok" type="button" id="ok" value="显示" onclick="history_data('divc');" /> <table id="divc" width="760" border="0" cellspacing="0" cellpadding="0" style=" display:none">
<tr >
<td bgcolor="#9966FF">table2 222</td>
<td bgcolor="#9966FF">table2 333</td>
<td bgcolor="#9966FF">table2 444</td>
</tr>
<tr>
<td bgcolor="#9966FF">table2 555</td>
<td bgcolor="#9966FF">table2 666</td>
<td bgcolor="#9966FF">table2 777</td>
</tr>
</table>
</form> <script>
function history_data(TagName) {
var obj = document.getElementById(TagName);
if (document.form1.ok.value=="显示")
{
document.form1.ok.value="隐藏";
obj.style.display = "";
}
else
{
document.form1.ok.value="显示";
obj.style.display = "none";
}
}
</script> </body>
</html>
贴两张效果图：
原始图：
点击显示之后的图：