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
  • 相关阅读:
    python 获取时间戳
    【转载】Git分支
    【转载】Jmeter分布式测试
    【总结】异常处理
    【转载】linux-查看日志
    【转载】python中if-else的多种写法
    【转载】Linux中rz和sz命令
    【转载】pip 使用国内源
    wrk(一)
    angular-gridster2使用
  • 原文地址:https://www.cnblogs.com/pony/p/1454040.html
Copyright © 2011-2022 走看看