user.js
//定义有关分页的操作
var pageSize;// 每页显示的记录数
var countPage;// 总页数
var countRecord;// 总记录
var nowPage=1;// 当前页
var startIndex;// 每页开始的记录数
var endIndex;// 每页结束的记录数
var $pageInfo;
var $showUsers;
// dom载入完毕 触发的匿名函数
$(document).ready(function() {
// 分页操作
pageSize=$("#pagesize").val();// 获取默认的pagesize的值
$pageInfo=$("#showPageInfo");
$showUsers=$("#showUsers");
// 获取全选input的Dom对象
var qxDom = $("#cbk")[0];
// 把checkbox类型的input设置为没有选中的状态
qxDom.checked = false;
// 把table 隐藏
$("#users").css("display", "none");
// 根据id获取添加的input的jquery对象
var $name = $("#name");
var $sex=$("input[type='radio']:checked");
var $age=$("#age");
/*-----------下面是添加按钮的事件处理------------------*/
// 注册按钮事件
$("#addUser").click(function() {
// 获取table中display样式的值
var val = $("#users").css("display");
// 判断是否隐藏
if ("none" == val) {
// 显示
$("#users").show();
}
// 获取name值
var name = $name.val();
// 获取sex值
var sex = $sex.val();
// 获取age值
var age = $age.val();
// 创建tr
var $tr = $("<tr></tr>");
// 创建td
var $td1 = $("<td></td>");
// 创建input
var $input = $("<input type='checkbox'>");
/*
* $td.append($input); var $input =
*
* $("<input>", { "type" : "checkbox" });
*/
$td1.append($input);
// 创建td并且添加name文本节点
var $td2 = $("<td></td>").append(name);
// 创建td并且 把sex 对应的文本添加到td中
var $td3 = $("<td></td>").append(sex);
var $td4 = $("<td></td>").append(age);
// 创建删除按钮对象
var $deleteBtn = $("<input type='button' value='删除'>");
// 给按钮注册事件
$deleteBtn.click(function() {
$(this).parent().parent().remove
();
});
var $td5 = $("<td></td>");
// 把创建的按钮添加到td5中
$deleteBtn.appendTo($td5);
// 注册可编辑事件
$td2.dblclick(clickTd);
$td3.dblclick(clickTd);
$td4.dblclick(clickTd);
// 对象的链式操作
$tr.append($td1).append($td2).append
($td3).append($td4).append($td5);
// 在tbody中添加tr
$("#showUsers").append($tr);
// 添加成功后 进行分页操作
pageInfo();
});
/*-----------以上面是添加按钮的事件处理------------------*/
/*-----------下面是全选的事件处理------------------*/
// 全选的操作
$("#cbk").click(function() {
if (this.checked) {
$("td>input [type='checkbox']").each(function() {
this.checked = true;
});
} else {
$("td>input [type='checkbox']").each(function() {
this.checked = false;
});
}
});
/*-----------以上面是全选的事件处理------------------*/
/*-----------下面是批量删除的事件处理------------------*/
// 删除的操作
$("#addUsers").click(function() {
$("td>input[type='checkbox']").each
(function() {
// alert("----------------");
if (this.checked) {
$(this).parent().parent
().remove();
}
qxDom.checked = false;
});
});
/*-----------以上面是批量删除的事件处理------------------*/
// 注册select的事件
$("#pagesize").change(function(){
pageSize=
$("#pagesize>option:selected").val();
pageInfo();
});
var $firstBtn=$("#firstBtn");
var $backBtn=$("#backBtn");
var $nextBtn=$("#nextBtn");
var $lastBtn=$("#lastBtn");
$firstBtn.click(pageInfo);
$backBtn.click(pageInfo);
$nextBtn.click(pageInfo);
$lastBtn.click(pageInfo);
});
/*------------下面是表格可编辑的事件处理--------------------------*/
var clickTd = function() {
// 获取当前对象中 孩子节点为input的几集合对象 判断这个集合对象的长度是否大于0
if ($(this).children("input").length > 0) {
// 返回程序
return false;
} else {// 否则继续执行
// 获取点击的td值
var value = $(this).text();
// td清空
$(this).empty();
// 创建input输入框
var $cinput = $("<input type='text' value='" + value + "'>");
// 失去焦点的事件
$cinput.blur(blurInput);
// 添加到td中
$(this).append($cinput);
}
};
// 失去焦点触发的函数
var blurInput = function() {
// 获取值
var value = $(this).val();
// 给td重新设置文本
$(this).parent().text(value);
};
/*------------以上面是表格可编辑的事件处理--------------------------*/
var pageInfo=function(){
// 获取总记录
countRecord=$("#showUsers tr").size();
// 计算总页数
countPage=Math.ceil(countRecord/pageSize);
// 点击按钮的判断
if(this.nodeType==1){
// 首先获取点击的按钮的id值
var idValue=$(this).attr("id");
// 判断是否是首页
if("firstBtn"==idValue){
nowPage=1;
}else if("backBtn"==idValue){
if(nowPage>1){
nowPage--;
}
}else if("nextBtn"==idValue){
if(nowPage<countPage){
nowPage++;
}
}else if("lastBtn"==idValue){
nowPage=countPage;
}
}
// 获取每页开始的记录
startIndex=(nowPage-1)*pageSize+1;
// 获取每页结束的记录
endIndex=nowPage*pageSize;
// 如果结束的记录数大于总记录数
if(endIndex>=countRecord){
// 让结束的记录数等于总记录数
endIndex=countRecord;
}
// 如果总的记录数 小于每页显示的记录数
if(countRecord<=pageSize){
// 让结束的记录数等于总记录数
endIndex=countRecord;
}
// 显示操作
$("#showUsers tr:gt("+(startIndex-1)+")").show();
$("#showUsers tr:lt("+(endIndex-1)+")").show();
// 隐藏操作
$("#showUsers tr:lt("+(startIndex-1)+")").css
("display","none");
$("#showUsers tr:gt("+(endIndex-1)+")").css
("display","none");
$pageInfo.html("当前从"+startIndex+"记录到"+endIndex+"记录结束，共"+countRecord+"记录，当前是"+nowPage+"页，共"+countPage+"页");
};
jquery8.html
<!DOCTYPE html>
<html>
<head>
<title>jquery8.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script type="text/javascript" src="./js/1.js"></script>
<script type="text/javascript" src="./js/user.js"></script>
</head>
<body>
<div align="center">
<input type="button" id="addUsers" value="删 除所有用户" />
<table id="users" border="1px" cellpadding="0" cellspacing="0">
<thead>
<th><input type="checkbox" id="cbk" /></th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>操作</th>
</thead>
<tbody id="showUsers"></tbody>
</table>
<div id="pagination">
<select id="pagesize">
<option value="3" selected="selected">3</option>
<option value="5">5</option>
<option value="8">8</option>
</select>
<input type="button" id="firstBtn" value="首页"/>
<input type="button" id="backBtn" value="上一页"/>
<input type="button" id="nextBtn" value="下一页"/>
<input type="button" id="lastBtn" value="末页"/>
<span id="showPageInfo">从1到3记录 共5条记录</span>
</div>
<br> <br>
<div>
姓名：<input type="text" id="name" /><br> <br> 性别：<input
type="radio" name="sex" value="男" />男 <input type="radio"
name="sex" checked="checked" value="女" />女<br> <br> 年龄：<input
type="text" id="age" /><br> <br> <input type="button"
id="addUser" value="添加用户" />
</div>
</div>
</html>
