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

来源：互联网发布：mac 关闭已打开的程序编辑：程序博客网时间：2024/06/05 03:46

<!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;        }}?>

0 0