码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2017-09-01 18:52:23      阅读:167      评论:0      收藏:0      [点我收藏+]

标签:charset   utf-8   fun   cin   pre   nbsp   content   round   onclick   

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

 

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

标签:charset   utf-8   fun   cin   pre   nbsp   content   round   onclick   

原文地址:http://www.cnblogs.com/mianbaoshu/p/7464576.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!