Jquery高手帮帮忙啊，只让表格的指定列可以编辑并ajax保存数据 [复制链接]

778cn　楼主

帖子: 84
体力: 337
威望: 0

发表于 2010-3-21 22:36:04 |显示全部楼层

怎么让指定的列可以编辑，如只让名字这一列可以编辑，望大家帮一下忙啊！谢谢了

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JQuery示例:可编辑table</title>
<link type="text/css" rel="stylesheet" href="css/editTable.css"/>
<script type="text/javascript" src="lib/jquery.js"></script>
</head>
<style type="text/css">
th {
background: #0066FF;
color: #FFFFFF;
line-height: 20px;
height: 30px;
}
td {
padding: 6px 11px;
border-bottom: 1px solid #95bce2;
vertical-align: top;
text-align: center;
}
td * {
padding: 6px 11px;
}
tr.alt td{
background: #ecf6fc;
}
tr.over td{
background: #bcd4ec;
}
</style>
<script type="text/javascript">
var this_ago;
var name;

$(document).ready(function(){
$(".stripe tr").mouseover(function(){

$(this).addClass("over");}).mouseout(function(){
$(this).removeClass("over");})
$(".stripe tr:even").addClass("alt");

//加事件(双击替换文本) //:td:first-child

$(".stripe tr td").dblclick(function() {
if(this_ago!=null){
if(this_ago!=this){
huanyuan(this_ago);
}else{
//点击同一个先判断当前值和开始值是否相等；不能的话可以修改
if(name==""||name==null){
return;
}else{
if(inname!=""&&inname!=null){

if(inname!=name){

}else{
return;
}
}else{
//返回
return;
}
}

}
}



if($(this).text()!=""&&$(this).text()!=null){
var name2=$(this).text();//替换文本框
if(name2!=""&&name2!=null){

thisthis_ago=this;
name=name2;
$(this).empty();
$(this).append("<input name='name' onchange=getNa(this) value='"+name+"' size='8'>");
}

}


});

})


//onchange文本框onchange时调用该方法
var inname;//文本框的值
function getNa(para){
inname=para.value;
var tdv=document.createTextNode(inname);
para.replaceNode(tdv);
}
//还原

var iname1;
function huanyuan(obj){

if(inname!=""&&inname!=null){
if(inname!=name){
$(obj).empty();
//判断是否改变
if(iname1!=inname){
$(obj).append(inname);
}else{
//相等的话说明没改变就要用当前的name来默认
$(obj).append(name);
}
iname1=inname;
}else{
$(obj).empty();
$(obj).append(name);
}

}else{
$(obj).empty();
$(obj).append(name);
}

}

</script>
</head>

<body>

<table class="stripe" width="200" border="0" cellpadding="1" cellspacing="1">
<tr>
<th width="50">序号</th><th width="150">名字</th> <th width="150">名字1</th> <th width="150">名字2</th>
</tr>
<tr>
<td>1</td><td>AAA</td> <td>AAA</td><td>AAA</td>
</tr>
<tr>
<td>2</td><td>BBB</td> <td>AAA</td><td>AAA</td>
</tr>
<tr>
<td>3</td><td>CCC</td> <td>AAA</td><td>AAA</td>
</tr>
<tr>
<td>4</td><td>DDD</td> <td>AAA</td><td>AAA</td>
</tr>
<tr>
<td>5</td><td>EEE</td> <td>AAA</td><td>AAA</td>
</tr>
</table>
</body>
</html>

西部数码顶级域名注册商39元抢注！

使用道具举报