效果圖
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;
}
涉及到j(luò)s 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);
});
});
涉及到j(luò)s jqajax.js
/*****************************************
*本案例針對table開發(fā) *
*使用的時(shí)候給table一個(gè) *
*id=editTable *
*下面的數(shù)組是定義好的數(shù)據(jù)庫字段 *
*在使用jqAjax時(shí)候直接遍歷carSub對象即可 *
*加入這樣一個(gè)“修改” ****************************************
*<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(){
//定義好要傳的數(shù)據(jù)字段
var colmes = new Array("ctid","","cnickname","cname","csex","cpwd","ctel","cemail","cbirthday","caddress");
//定義一個(gè)組裝車用戶裝對象
var carSub = "";
//定義一個(gè)文本框，當(dāng)點(diǎn)擊td的時(shí)候，會把文本框放到里面去，并把里面的內(nèi)容取出來放到這個(gè)文本框里面
var Einput = "<input type='text' style='background:transparent;border:0px;color:yellow;width:100px;'></input>";
var regex = new RegExp("^[\u4E00-\u9FA5]+$");
//給每一個(gè)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);
}
}
});
//點(diǎn)擊修改時(shí)候，提交操作
$("#editTable tr:gt(0) td span[id='updateE']").click(function(){
//清空原來存在的數(shù)據(jù)
carSub = "";
//獲得id并裝載
carSub = "{\""+colmes[0]+"\":\""+$(this).attr("class")+"\",";
//當(dāng)點(diǎn)擊修改時(shí)候，獲得父元素，之后獲得父元素以下的孩子元素
var obj = $(this).parent().parent().children();
for(var i = 2; i < obj.length - 1; i ++){
//如果這個(gè)文本框的值是空說明這個(gè)文本框已經(jīng)被input text取代
if(obj.eq(i).text().length == ""){
carSub += "\""+colmes[i]+"\":\""+obj.eq(i).children().val() + "\",";
}else{
carSub += "\""+colmes[i]+"\":\""+obj.eq(i).text() + "\",";
}
//修改以后點(diǎn)擊以后把文本框去掉
obj.eq(i).text(obj.eq(i).children().val());
obj.eq(i).children().empty();
}
//把數(shù)據(jù)最后多出來的點(diǎn)去掉,之后加上最后的括號，最后轉(zhuǎn)換為對象用eval
carSub = eval("("+carSub.substr(0,carSub.lastIndexOf(","))+"})");
//試著取出一些數(shù)據(jù)對象方式取出
alert(carSub["ctid"]+" \r\n"+carSub["cnickname"]+" \r\n"+carSub["cname"]+"\r\n......");
});
//2012年9月12日 08:33:38
//當(dāng)點(diǎn)擊刪除的時(shí)候，刪除這個(gè)元素
$("span[id=deleteE]").click(function(){
var isDelete = confirm("確定刪除（？）");
//確定是否刪除
if(isDelete){
$(this).parent().parent().empty();
alert("yes delete!"+$(this).attr("class"));
}else{
alert("no delete!");
}
});
});
