动态控制页面的隐藏显示

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

　　使用工具: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")进行判断