标签：function obj 模型 carSub width ajax var children 页面
效果图
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!");
}
});
});
标签：function,obj,模型,carSub,width,ajax,var,children,页面 来源： https://blog.51cto.com/u_14943622/2844478
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。