效果图
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!");
}
});
});