JQuery 行内编辑(即点即改)

行内编辑

下面是详细的代码：

<style>
 .dian {
        cursor: pointer;
    }
</style>

//这个让鼠标 移动到 span上 的时候 是一个小手

<tr id="这里要修改的ID">
<td>
	<span class="dian" onselectstart="return false" field="FlowerName">玫瑰花</span>
</td>
</tr>

//class="dian" 这个是  是一个标志，便于接下来找到 这个span。
//onselectstart="return false"   这个可以让span中的字 ，无法被选中
//field="FlowerName"   这个是存要修改的字段的。

<input type="text" class="gai" style="width:140px" />

//这个是双击之后的拼接的代码，输入完后，单击其他地方。让input 失去焦点， 用ajax 无刷新 提交到后台，访问数据库，进行修改

  //**** 存旧的值
var oldValue = "";

//**** 即点即改 -点
$(document).on("dblclick",
    ".dian",
    function () {
        //判断是否已经点击，如果已经是被点击过的，就return ,不让程序再次生成input
        //如果不判断，会出现非常尴尬的情况,可以自己试一试

        if ($(this).children("input").attr("type") == "text") return;
        oldValue = $(this).html();
        $(this).html('<input type="text" class="gai" style="width:140px" />');

        //将焦点放在最后。（先赋值为空，然后再获取焦点，然后再反填oldValue）
        //这样就可以让焦点出现在最后，而不是出现在oldValue的最前面
        $(this).children("input").val(" ").focus().val(oldValue);
    }
);

//**** 即点即改 -改
$(document).on("blur",
    ".gai",
    function () {
        //这个标签
        var thisInput = $(this);
        //修改的ID
        var ID = thisInput.parents('tr').attr('id');
        //输入的值
        var newValue = thisInput.val();
        //要修改的字段名称
        var field = thisInput.parent().attr('field');

        $.ajax({
            url: "/Home/FlowerUpdateValue",
            type: "post",
            data: {
                Id: ID,
                field: field,
                newValue: newValue
            },
            success: function (data) {
                if (data == 1) {

                    thisInput.parent().html(newValue);
                    //成功后将新输入的值 赋值给span
                } else {
                    alert('no');

                    thisInput.parent().html(oldValue);
                      //失败后将旧值 赋值给span
                }

            }
        });

    }
);

拼接html标签的例子：