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

最新推荐文章于 2021-12-12 20:01:37 发布

灵眼儿上方

最新推荐文章于 2021-12-12 20:01:37 发布

阅读量324

点赞数

分类专栏： php 文章标签： jquery PHP

本文链接：https://blog.csdn.net/liyanq528/article/details/52108187

版权

php 专栏收录该内容

18 篇文章 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;
        }
}
?>

灵眼儿上方

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
[php学习十八]JQuery练习3－综合

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{fo
复制链接

扫一扫

专栏目录