zoukankan      html  css  js  c++  java

  • html中点击 checkbox (radio也可以) 隐藏tr 或 展现tr

    Html代码
    1. 总结一下 html中的隐藏tr的 javascript 方法  
    2.   
    3. -----------------------源码 -----------------------------------  
    4.   
    5. <html>  
    6. <head>  
    7.     
    8.    <title>点击checkbox 隐藏 展现 某行</title>  
    9. <script>  
    10.      function changeOracle(){  
    11.          
    12.         document.getElementById("oracle1").style.display = (document.getElementById("oracle1").style.display=="")?"none":"";  
    13.        document.getElementById("oracle2").style.display = (document.getElementById("oracle2").style.display=="")?"none":"";  
    14.        }  
    15.          
    16. </script>  
    17. </head>  
    18. <body>  
    19.    <table>  
    20.     <tr>  
    21.      <td >  
    22.       是否安装Oracle服务器：  
    23.      </td>  
    24.      <td>  
    25.       <input type="checkbox" id="oracle" name="oracle" value="1" onclick="changeOracle();" />  
    26.       &nbsp;  
    27.      </td>  
    28.      <td ></td>  
    29.      <td ></td>  
    30.     </tr>  
    31.     <tr id="oracle1" style="display:none;">  
    32.      <td >  
    33.       Oracle用户名：  
    34.      </td>  
    35.      <td >  
    36.      <input type = "text" name = "oracleUsername"/>  
    37.      </td>  
    38.      <td>  
    39.       Oracle密码：  
    40.      </td>  
    41.      <td >  
    42.       <input type = "text" name = "oraclePassword"/>  
    43.      </td>  
    44.     </tr>  
    45.     <tr id="oracle2" style="display:none;">  
    46.      <td>  
    47.       Oracle全局数据库名：  
    48.      </td>  
    49.      <td >  
    50.       <input type = "text" name = "oracleDbName"/>  
    51.      </td>  
    52.      <td ></td>  
    53.      <td ></td>  
    54.     </tr>  
    55.    </table>  
    56. </body>  
    57. </html>  
    TEST
  • 相关阅读:
    HashMap底层实现原理(JDK1.8)源码分析
    JVM总结
    初识Nosql
    线程池总结
    Linux中常用操作命令
    JAVA—集合框架
    TeKtronix TDS210数字示波器使用简介
    硬盘的物理结构
    Unicode 与 UTF
    I2C串行总线
  • 原文地址：https://www.cnblogs.com/pony/p/1454040.html
Copyright © 2011-2022 走看看