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