jquery实现文本点击修改

http://www.cnblogs.com/shenliang123/archive/2012/04/17/2453567.html

直接点击文本进行修改的方式是比较快捷的，而且挺好用的，分享下，先看下效果：

<table class="tablefirst" id="radioSub">
<col style="width:5%"/>
<col style="width:5%"/>
<col style="width:10%"/>
<col style="width:11%"/>
<col style="width:10%"/>
<col style="width:11%"/>
<col style="width:20%"/>
<tr>
<th></th><th>序号</th><th>样卷名称</th><th>出卷时间</th><th>出卷老师</th><th>所属课程</th><th>基本操作</th>
</tr>
<#if samplesList?exists>
<#list samplesList as samp>
<tr>
<td><input type="checkbox" name="id" value="${samp.sampleId}"/></td>
<td>${samp_index+1}</td>
<td id = "sampleName" name = "sampleName" value = "${samp.sampleId}">${samp.sampleName}</td>
<td>${samp.sampleTime}</td>
<td>${samp.admin.adminName}</td>
<td>${samp.course.courseName}</td>
<td>
<span class="details" onclick="showAddBatchSub('${samp.sampleId}', 'showPaperInforAction.action')">查看样卷题型</span>    
</td>
</tr>
</#list>
</#if>
</table>

下面是js代码：下面默认是在页面加载时对所有的td都绑定点击事件，这个可以根据自己的需要进行修改

<script type="text/javascript" language="javascript">
//在页面装载时，让所有的td都拥有点击事件
$(document).ready(function(){
//找到所有td节点
var tds = $("td");
//var tds = $("#sampleName");
//var tds = document.getElementsByName('sampleName');
//alert(tds);
//给所有的td节点增加点击事件
tds.click(tdclick);
});

function tdclick(){
var clickfunction = this;
//0,获取当前的td节点
var td = $(this);
//获取id
var sampleId = $(this).val();
//alert(id);
//1,取出当前td中的文本内容保存起来
var text = $(this).text();
//2，清空td里边内同
td.html("");
//3,建立一个文本框，也就是建一个input节点
var input = $("<input>");
//4,设置文本框中值是保存起来的文本内容
input.attr("value",text);
//4.5让文本框可以相应键盘按下的事件
input.keyup(function(event){
//记牌器当前用户按下的键值
var myEvent = event || window.event;//获取不同浏览器中的event对象
var kcode = myEvent.keyCode;
//判断是否是回车键按下
if(kcode == 13){
var inputnode = $(this);
//获取当前文本框的内容
var inputext = inputnode.val();
//清空td里边的内容,然后将内容填充到里边
var tdNode = inputnode.parent();
tdNode.html(inputext);
//让td重新拥有点击事件
tdNode.click(tdclick);
if(inputext != text){                    //只有当内容不一样时才进行保存
//调用该方法与后台交互
sampleNameUpdate(sampleId, inputext, 'sampleAlterAction.action');
}
}
});
//5，把文本框加入到td里边去
td.append(input);
//5.5让文本框里边的文章被高亮选中
//需要将jquery的对象转换成dom对象
var inputdom = input.get(0);
inputdom.select();
//6,需要清楚td上的点击事件
td.unbind("click");
}
</script>

交互的Ajax

//样卷名字的修改
function sampleNameUpdate(id, content, tagAction){
//alert(id+content+tagAction);
$.ajax({
url:tagAction,
data:{
sendTime:(new Date()).getTime(),
sampleName:content,
tagId: id
},
type:'post',
async:false,
dataType:'json',
success:function(data){
if(data.success){
alert("修改成功");
}else{
alert("修改失败！");
}
}
});
}