技術標籤：jqueryjquery

**

基於jQuery的即點即改，簡單實用，完整的，包括髮送請求！

**

**

html

**

<table>
    
    <tbody>
    <tr><th>IDcard</th>
    <th>Name</th>
    <th>Address</th>
    </tr><tr id="1">
        <td class="id">1</td>
 

        <td param="name" class="gai">袁夢坤</td>
        <td param="address" class="gai">河南省商丘市柘城縣</td>
    </tr>
    <tr id="2">
        <td class="id">2</td>
        <td param="name" class
 
="gai">劉凱歌</td>
        <td param="address" class="gai">河南省商丘市柘城縣</td>
    </tr>
</tbody>
</table>

**

css

**

 td {
	border:1px solid #0094ff;
	text-align:center;
}

**

js（有詳細的註釋，新手一看就懂！）

**

$(function() {
    $(document).on("click"
 
, ".gai", function() {
        //不重複
        if ($(this).children("input").prop("type") == 'text') return false;
        //獲取文字
        var data = $(this).html();
        //替換為文字框+文字
        var input = '<input type="text" id="ai" value="' + data + '">';
        $(this).html(input);
        //獲取游標
        $(this).children("input").focus();
    });
    $(document).on("blur", "#ai", function() {
        //修改後的內容
        var data = $(this).val();
        //修改的ID
        var id = $(this).parents("tr").prop("id");
        //修改的欄位
        var param = $(this).parent().attr("param");
        alert("修改的ID：" + id + "|" + "修改的欄位：" + param + "|" + "修改後的內容：" + data);
        var obj = $(this);
        //傳送AJAX
        // $.ajax({
        //     type:"post",
        //     url:"",
        //     data:{
        //         "data":data,
        //         "id":id,
        //         "param":param
        //     },
        //     success:function(data){
        //         if(data==1){
        obj.parent().html(data);
        //       }
        //   }
        //})
    })
})