JQuery的简单应用

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 = $("");		// 创建td		var $td1 = $("");		// 创建input		var $input = $("");		/*		 * $td.append($input); var $input =		 * 		 * $("", { "type" : "checkbox" });		 */		$td1.append($input);		// 创建td并且添加name文本节点		var $td2 = $("").append(name);		// 创建td并且 把sex 对应的文本添加到td中		var $td3 = $("").append(sex);		var $td4 = $("").append(age);		// 创建删除按钮对象		var $deleteBtn = $("");		// 给按钮注册事件		$deleteBtn.click(function() {			$(this).parent().parent().remove();		});		var $td5 = $("");		// 把创建的按钮添加到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 = $("");		// 失去焦点的事件		$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=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.
("当前从"+startIndex+"记录到"+endIndex+"记录结束，共"+countRecord+"记录，当前是"+nowPage+"页，共"+countPage+"页");};

<script type="text/javascript" src="./js/1.js">《script》<script type="text/javascript" src="./js/user.js">《script》	
				
			
				
				
姓名
				
性别
				
年龄
				
操作
			
			
		
		
							3				5				8								    		    		    		    从1到3记录 共5条记录		
		
 
		
			姓名：
 
 性别：男 女
 
 年龄：