zoukankan      html  css  js  c++  java
  • 利用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>

     贴两张效果图:

    原始图:

    点击显示之后的图:

  • 相关阅读:
    构建maven项目3
    maven初试2
    maven入门
    Spring对Hibernate事务管理
    UNIX网络编程卷1 时间获取程序client UDP 协议无关
    keystone WSGI流程
    Request介绍及演示样例 PART1
    恭喜兄弟到360实习
    GNU Linux高并发性能优化方案
    QTP 无法识别web 大全
  • 原文地址:https://www.cnblogs.com/mianbaoshu/p/7464576.html
Copyright © 2011-2022 走看看