ajax 页面模型

效果图

html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>查看客户</title>
<link type="text/css" rel="stylesheet" href="css/list.css" />
<script type="text/javascript" language="javascript" src="js/jquery-1.4.2.js"></script>
<script type="text/javascript" language="javascript" src="js/list.js"></script>
<script type="text/javascript" language="javascript" src="js/jqajax.js"></script>
</head>

<body>
<div class="mainDiv">
	<div class="topDiv">
		<div class="soso">
			<form action="#" method="post">
				<input type="text" class="sosotext"/>
				<input type="submit" value="" id="subsoso"/>
			</form>
		</div>
	</div>
	<div class="bodyDiv">
		<table border="1" id="editTable">
			<tr align="center">
				<td>选取操作</td>
				<td>序号</td>
				<td>昵称</td>
				<td>姓名</td>
				<td>性别</td>
				<td id="dne" class="dn">密码</td>
				<td id="dne" class="dn">电话</td>
				<td id="dne" class="dn">邮箱</td>
				<td>地址</td>
				<td>操作</td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>1</td>
				<td>小洋人</td>
				<td οnclick="editTd()" id="t">西施</td>
				<td>女</td>
				<td id="dne" class="dn">123456</td>
				<td id="dne" class="dn">15356897415</td>
				<td id="dne" class="dn">xiaoyangren@qq.com</td>
				<td>北京吉林长春</td>
				<td><span style="color:#00FFFF;cursor:pointer;" id="deleteE" class="1">删除</span>|
					<span style="color:#FFFF00;cursor:pointer;" id="updateE" class="1">修改</span>|
					<span class="detail">详情</span></td>
			</tr>
			<tr>
				<td><input type="checkbox" /></td>
				<td>2</td>
				<td>小洋人</td>
				<td>貂蝉</td>
				<td>女</td>
				<td id="dne" class="dn">123456</td>
				<td id="dne" class="dn">15356897415</td>
				<td id="dne" class="dn">xiaoyangren@qq.com</td>
				<td>北京吉林长春</td>
				<td><span style="color:#00FFFF;cursor:pointer;" id="deleteE" class="2">删除</span>|
					<span style="color:#FFFF00;cursor:pointer;" id="updateE" class="2">修改</span>|
					<span class="detail">详情</span></td>
			</tr>
		</table>
	</div>
</div>
</body>
</html>


css代码

/* CSS Document */
	
	*{
		margin:0px;
	}
	
	body{
		background-image:url(../images/add2.gif);
		background-attachment:fixed;
	}
	
	.mainDiv{
		color:#FFFFFF;
	}
	
	.topDiv{
		background-repeat:no-repeat;
		width:128px;
		height:128px;
	}
	
	.soso{
		
		width:700px;
		height:128px;
	}
	
	.detail{
		cursor:pointer;
		color:#00FF00;
	}
	
	.dn{
		display:none;
	}
	
	.dncolor{
		color:#00FFFF;
	}
	
	.sosotext{
		width:420px;
		height:50px;
		color:#FFFFFF;
		font-family:"楷体_GB2312";
		background:transparent;
		margin-top:70px;
		position:absolute;
		font-size:45px;
		border:1px #FF00FF solid;
	}
	
	#subsoso{
		background:transparent;
		background-image:url(../images/list2.png);
		margin-left:430px;
		margin-top:70px;
		border:1px #00FF00 solid;
		width:55px;
		height:54px;
	}


涉及到js list.js

// JavaScript Document
	$(function(){
		
		$(".detail").toggle(
		
		function(){
			
			$(".bodyDiv table tr td[id=dne]").removeClass("dn").addClass("dncolor");
			$(".mainDiv").width(1400);
		},
		function(){
			$(".bodyDiv table tr td[id=dne]").addClass("dn");
			$(".mainDiv").width(1000);
		});
		
	});


涉及到js jqajax.js

	
	/*****************************************
	 *本案例针对table开发					 *
	 *使用的时候给table一个					 *
	 *id=editTable							 *
	 *下面的数组是定义好的数据库字段		 *
	 *在使用jqAjax时候直接遍历carSub对象即可 *
	 *加入这样一个“修改”				     ****************************************
	 *<span style="color:#FFFF00;cursor:pointer;" id="updateE" class="1">修改</span>*
	 *2012年9月12日 08:46:25                                 						*
	 *加入异步删除功能																*
	 *<span style="color:#00FFFF;cursor:pointer;" id="deleteE" class="1">删除</span>*
	 ********************************************************************************/
	
	$(function(){
		
		//定义好要传的数据字段
		var colmes = new Array("ctid","","cnickname","cname","csex","cpwd","ctel","cemail","cbirthday","caddress");		
		//定义一个组装车用户装对象
		var carSub = "";
	
		//定义一个文本框,当点击td的时候,会把文本框放到里面去,并把里面的内容取出来放到这个文本框里面
		var Einput = "<input type='text' style='background:transparent;border:0px;color:yellow;width:100px;'></input>";		   
		var regex = new RegExp("^[\u4E00-\u9FA5]+$");
		
		//给每一个td添加事件
		$("#editTable tr:gt(0) td:gt(1)").click(function(){
			
			var now_ = $(this).text();
		
			if($(this).children().val()==null){
				
				$(this).empty();
				$(this).append(Einput);
				if(regex.test(now_)){
					$(this).children().focus().val(now_).css('width',now_.length*16);
				}else{
					$(this).children().focus().val(now_).css('width',now_.length*10);
				}
			}
			
		});
		
		//点击修改时候,提交操作
		$("#editTable tr:gt(0) td span[id='updateE']").click(function(){
				
				//清空原来存在的数据
				carSub = "";
				
				//获得id并装载
				carSub = "{\""+colmes[0]+"\":\""+$(this).attr("class")+"\",";

				//当点击修改时候,获得父元素,之后获得父元素以下的孩子元素
				var obj = $(this).parent().parent().children();
				
				for(var i = 2; i < obj.length - 1; i ++){
					
					//如果这个文本框的值是空说明这个文本框已经被input text取代
					if(obj.eq(i).text().length == ""){
						carSub += "\""+colmes[i]+"\":\""+obj.eq(i).children().val() + "\",";
						
					}else{
						carSub += "\""+colmes[i]+"\":\""+obj.eq(i).text() + "\",";	
					
					}
					//修改以后点击以后把文本框去掉
					obj.eq(i).text(obj.eq(i).children().val());	
					obj.eq(i).children().empty();
			    }
				//把数据最后多出来的点去掉,之后加上最后的括号,最后转换为对象用eval
				carSub = eval("("+carSub.substr(0,carSub.lastIndexOf(","))+"})");
				//试着取出一些数据对象方式取出
				alert(carSub["ctid"]+" \r\n"+carSub["cnickname"]+" \r\n"+carSub["cname"]+"\r\n......");
		});
		
		//2012年9月12日 08:33:38
		//当点击删除的时候,删除这个元素
		$("span[id=deleteE]").click(function(){
			
			var isDelete = confirm("确定删除(?)");
			//确定是否删除
			if(isDelete){
				
				$(this).parent().parent().empty();
				
				alert("yes delete!"+$(this).attr("class"));
				
			}else{
				alert("no delete!");
			}
			
		});
		
	});
	


 

小傅哥 CSDN认证博客专家 ASM 设计模式 面经手册
©️2020 CSDN 皮肤主题: 数字20 设计师:CSDN官方博客 返回首页
实付 39.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值