[php学习十八]JQuery练习3－综合

男娘i 2022-09-25 00:27 152阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <style>
        thead{color: #FFA500; font-size: 18px; font-weight: bold;}
        tfoot{color: saddlebrown; font-size: 18px; font-weight: bold;}
        td{padding: 15px; border: 1px solid darkolivegreen;}
        tbody span{font-style: italic; color: blue;text-decoration:underline}
        tbody span:hover{cursor: pointer}
        .trRow{background-color: burlywood}
        .pageText{width: 40px; font-size: 20px}
        .turnPage{width: 50px; font-size: 20px}
    </style>
    <head>
        <meta charset="UTF-8">
        <title>JQuery综合练习</title>
        <script src = jquery-3.1.0.min.js></script>
        <script>
            $(document).ready(function () {
                //$("*").css({"font-size":"13px"});
                $("p").css({"margin-bottom":"10px"});
                $("#btn1").click(function () {
                    alert($("#p1").text());
                });
                $("#btn2").click(function () {
                    alert($("#t1").val());
                });
                $("#btn3").click(function () {
                    alert($("#d1").html());
                });
                function refreshTable() {
                    $("table:first tbody tr:even").css({"background-color":"burlywood"});
                    $("table:first tbody tr:odd").css({"background-color":"white"});
                    var count =$("table:first tbody tr").length;
                    $("#userCount").html(count + "人");
                }
                $.get("FootballNames.php?pageNo=1", function (data, status) {
                    $("#mainContent").html(data);
                    refreshTable();
                    $("table:first span").click(function () {
                        /*这里有瑕疵了,设置高度后,没有动画,估计和TD的高度有关系,先不管了,以后在说,睡觉~~~*/
                        $(this).parent().parent().animate({height: '80px'}, 1000,function () {
                            $(this).remove();
                            refreshTable();
                        });
                    });
                });
                $("#btnTurn").click(function () {
                    var index = $("#txtPage").val();
                    /*$.get("FootballNames.php?pageNo=" + index, function (data, status) {
                        $("#mainContent").html(data);
                        refreshTable();
                        $("table:first span").click(function () {
                            $(this).parent().parent().remove();
                            refreshTable();
                        });
                    });*/
                    /*还是推荐用AJAX吧*/
                    $.ajax({
                        url:"FootballNames.php",
                        data:{"pageNo" :index},
                        datatype:"json",
                        success:function (result) {
                            $("#mainContent").html(result);
                            refreshTable();
                            $("table:first span").click(function () {
                                $(this).parent().parent().remove();
                                refreshTable();
                            });
                    }});
                });
            });
        </script>
    </head>
    <body>
    <p id="p1">获取HTML的属性</p>
    <input style="width: 200px" id="t1" title="" value="北京欢迎你">
    <div id="d1">
        <button id="btn1">获取p1的Text()</button>
        <button id="btn2">获取t1的Val()</button>
        <button id="btn3">获取div1的html</button>
    </div>
    <hr>
    <p>通讯录</p>
    <div>
    <table cellspacing="0px" cellpadding="0px">
        <caption>足球明星通讯录</caption>
        <thead>
            <tr>
                <td>姓名</td><td>年龄</td><td>国家</td><td>俱乐部</td><td>操作</td>
            </tr>
        </thead>
        <tbody id="mainContent">
    
        </tbody>
        <tfoot>
            <tr>
                <td colspan="2">合计</td><td id="userCount" colspan="3">0人</td>
            </tr>
            <tr>
                <td colspan="5">
                    <span>共3页</span>
                    <input id="txtPage" class="pageText" type="text" title="" value="1">
                    <button id="btnTurn" class="turnPage">GO</button>
                </td>
            </tr>
        </tfoot>
    
    </table>
    </div>
    </body>
    </html>

<?php
    /**
     * Created by PhpStorm.
     * User: liyanq
     * Date: 16/8/3
     * Time: 12:41
     */
    $pageNo = $_GET["pageNo"];
    echo "Hello";
    switch ($pageNo){
        case 1: {
            echo "<tr><td>梅西</td><td>29</td><td>阿根廷</td><td>巴萨</td><td><span>删除</span></td></tr>";
            echo "<tr><td>苏亚雷斯</td><td>28</td><td>乌拉圭</td><td>巴萨</td><td><span>删除</span></td></tr>";
            echo "<tr><td>内马尔</td><td>25</td><td>巴西</td><td>巴萨</td><td><span>删除</span></td></tr>";
            echo "<tr><td>本泽马</td><td>26</td><td>法国</td><td>皇马</td><td><span>删除</span></td></tr>";
            break;
        }
        case 2:{
            echo "<tr><td>C罗</td><td>31</td><td>葡萄牙</td><td>皇马</td><td><span>删除</span></td></tr>";
            echo "<tr><td>莱万多夫斯基</td><td>27</td><td>波兰</td><td>拜仁</td><td><span>删除</span></td></tr>";
            echo "<tr><td>厄齐尔</td><td>25</td><td>德国</td><td>阿森纳</td><td><span>删除</span></td></tr>";
            echo "<tr><td>桑切斯</td><td>26</td><td>智利</td><td>阿森纳</td><td><span>删除</span></td></tr>";
            break;
            }
    }
    ?>