zoukankan      html  css  js  c++  java
  • 动态控制页面的隐藏显示

      实现功能:点击按钮隐藏商品列表,再次点击显示

      使用工具:jQuery

      

    <!DOCTYPE HTML>
    <html xmlns:th="http://www.thymeleaf.org">
    <head>
        <title>hello</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link rel="stylesheet" type="text/css" th:href="@{/css/bootstrap.min.css}"/>
    </head>
    <body>
    <button type="button" class="btn btn-success" style="margin: 10px;" ms-click="@request">商品列表</button>
        <table class="table table-striped" id="t1">
            <thead>
            <tr>
                <th class="info">ID</th>
                <th class="success">Name</th>
                <th class="warning">Price</th>
            </tr>
            </thead>
            <tbody>
            <tr th:each="prod: ${prodList}">
                <td th:text="${prod.id}"></td>
                <td th:text="${prod.name}">Oranges</td>
                <td th:text="${#numbers.formatDecimal(prod.price, 1, 2)}">0.99</td>
            </tr>
            </tbody>
    </table>
    
    </body>
        <script th:src="@{/js/bootstrap.min.js}"></script>
        <script th:src="@{/js/jquery-1.6.2.js}"></script>
        <script>
            $('button').click(function () {
               if( $("#t1").is(":hidden")){
                   $("#t1").show();
               }else{
                   $("#t1").hide();
               }
            });
        </script>
    </html>

    利用jQuery的一个方法,$(元素).is(":hidden")进行判断

  • 相关阅读:
    进程与线程的区别与联系
    IPC 进程间通信
    sql中的group by 和 having 用法
    大端小端格式
    Spring AOP的一个比喻和IOC的作用
    volatile变量
    策略模式
    划分算法与快速排序
    希尔排序及希尔排序java代码
    红黑树
  • 原文地址:https://www.cnblogs.com/chq011/p/6963958.html
Copyright © 2011-2022 走看看