标签：
本文实现以下几个功能：
1.点击文字变为文本框 ，并选中文字
2.对文本框内容进行修改
3.点击文本框以外的地方文本框再次变为修改后的文字，如果是删除文字，显示默认提示文字
4. 同步更新SQL数据库内容
首先是HTML模板部分：
1 <{if !empty($img_list)}> 2 <{foreach $img_list as $kk=>$vv}> 3 <div class="item-box radius3"> 4 <a href="<{$vv[‘image‘]}>" target="_blank"> 5 <div class="item-image"> 6 <img src="<{$vv[‘image‘]}>?imageView/0/w/260/q/85" /> 7 </div> 8 </a> 9 <div class="item-desc" > 10 <span class="item-desc-span"><{$vv[‘name‘]}></span> 11 <input type="hidden" name="image_id" value="<{$vv[‘id‘]}>" /> 12 </div> 13 <div class="item-op"> 14 15 <{date(‘Y-m-d h:i:s‘,$vv[‘add_time‘])}> 16 <div class="opAbs"> 17 <{if $vv[‘status‘]==0}> 18 <span class="op" onclick="set_cover(<{$vv[‘id‘]}>)" >设为封面</span> 19 <{/if}> 20 <span class="op" onclick="image_del(<{$vv[‘id‘]}>)" >删除</span> 21 22 23 24 </div> 25 </div> 26 </div> 27 <{/foreach}> 28 <{/if}>
再来是处理脚本：
<script type="text/javascript">
$(function(){
$(".item-desc-span").click(function(){
var span_str = $(this);
var ex_desc_str = span_str.text();
var input_str = $("<input type=‘text‘ class=‘editTxt‘ name=‘desc‘ value=‘"+ex_desc_str+"‘ />");
span_str.html(input_str);
input_str.click(function() { return false; });
input_str.trigger("focus");
input_str.select();
//input失去焦点时候
input_str.blur(function(){
var to_desc = $(this).val();
var id = $(this).parent().next(‘input‘).val();
$.ajax({
type: ‘POST‘,
url: ‘/club_image/set_desc‘,
dataType: ‘json‘,
data:{‘id‘: id,‘desc‘:to_desc},
success: function(data){
if(data.success==1){
if(to_desc){
span_str.html(to_desc);
}else{
span_str.html(‘暂无描述‘);
}
}else{
span_str.html(ex_desc_str);
alert("后台错误："+data.msg);
}
},
error: function(data){
alert("AJAX错误");
ret = false;
}
});
});
//按下回车键时候
input_str.keydown(function(event){
if(event.keyCode == 13 ) {
var to_desc = $(this).val();
var id = $(this).parent().next(‘input‘).val();
$.ajax({
type: ‘POST‘,
url: ‘/club_image/set_desc‘,
dataType: ‘json‘,
data:{‘id‘: id,‘desc‘:to_desc},
success: function(data){
if(data.success==1){
if(to_desc){
span_str.html(to_desc);
}else{
span_str.html(‘暂无描述‘);
}
}else{
span_str.html(ex_desc_str);
alert("后台错误："+data.msg);
}
},
error: function(data){
alert("AJAX错误");
ret = false;
}
});
}
});
});
});
</script>
标签：
原文地址：http://www.cnblogs.com/wyykim/p/4290488.html
