利用JavaScript实现动态显示表格且对应改变按键的value值

插入的代码并没有符合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>

贴两张效果图：

原始图：

点击显示之后的图：