ajax 页面模型

来源：互联网发布：彩虹代刷3.9破解版源码编辑：程序博客网时间：2024/05/20 22:03

效果图

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 onclick="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();    }//把数据最后多出来的点去掉,之后加上最后的括号，最后转换为对象用evalcarSub = 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!");}});});