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("修改失败！");            }        }    });}