jquery實現文本點擊修改

直接點擊文本進行修改的方式是比較快捷的，而且挺好用的，分享下，先看下效果：

頁面簡單表示的代碼為：（這個無關緊要）

<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>&nbsp;&nbsp;&nbsp;&nbsp;
                </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("修改失敗！");
            }
        }
    });
}