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

插入的代码并没有符合HTML5样式，只是为了实现利用JS动态显示表格，并且按键的value值会同时发生变化的功能。

 1 <!DOCTYPE >
 2 <html >
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5 </head>
 6 <body>
 7 <table width="760" border="0" cellspacing="0" cellpadding="0">
 8     <tr >
 9         <td bgcolor="#00CCFF">222</td>
10         <td  bgcolor="#00CCFF">333</td>
11         <td  bgcolor="#00CCFF">444</td>
12     </tr>
13     <tr >
14         <td bgcolor="#00CCFF">555</td>
15         <td  bgcolor="#00CCFF">666</td>
16         <td  bgcolor="#00CCFF">777</td>
17     </tr>
18 </table>
19 
20 
21 <form name="form1" >
22     <input name="ok" type="button" id="ok" value="显示" onclick="history_data('divc');" />
23     
24     <table id="divc" width="760" border="0" cellspacing="0" cellpadding="0"  style=" display:none">
25             <tr >
26                 <td bgcolor="#9966FF">table2 222</td>
27                 <td bgcolor="#9966FF">table2 333</td>
28                 <td bgcolor="#9966FF">table2 444</td>
29             </tr>
30             <tr>
31                <td bgcolor="#9966FF">table2 555</td>
32                 <td bgcolor="#9966FF">table2 666</td>
33                 <td bgcolor="#9966FF">table2 777</td>
34             </tr>
35     </table>
36 </form>
37 
38 <script>
39 function history_data(TagName) {
40    var obj = document.getElementById(TagName);
41    if (document.form1.ok.value=="显示")
42    {
43      document.form1.ok.value="隐藏";
44          obj.style.display = ""; 
45    }
46    else
47    {
48      document.form1.ok.value="显示";
49      obj.style.display = "none";
50    }
51 }
52 </script>
53 
54 </body>
55 </html>

 贴两张效果图：

原始图：

点击显示之后的图：

 

posted @ 2017-09-01 18:19  声声慢43  阅读(337)  评论(0)  编辑  收藏  举报