前段时间做了一个小网站，里面有个小功能感觉挺好的，在此与大家分享一下，还请各位大神不要笑话小弟的无知。

此功能大概是这个样子的：点击下图中的类别名称，就可以对类别进行修改。

点击类别名称以后，原来的表格变成一个可编辑的文本框，并全选里面的内容，此时可直接进行修改。回车或者鼠标点击其他地方,提交修改内容.

如果不做修改点击别处或者按“Esc”或回车键，就会回到之前的样子，如果修改后跟其他类名重复就会有相应的提示：

如果类名没问题就会将修改后的内容显示到页面，同时会修改数据库的值。

数据库修改前              数据库修改后

用到的js代码

/**********************************************
创建人：刘水镜
说明：    可编辑的表格
**********************************************/

$(function () {    // 相当于在页面中的body标签加上onload事件
    $(".caname").click(function () {   // 给页面中有caname类的标签加上click函数
        var objTD = $(this);
        var oldText = $.trim(objTD.text());  // 保存老的类别名称
        var input = $("<input type='text' value='" + oldText + "' />"); // 文本框的HTML代码
        objTD.html(input);   // 当前td的内容变为文本框
        // 设置文本框的点击事件失效
        input.click(function () {
            return false;
        });
        // 设置文本框的样式
        input.css("border-width", "0px");  //边框为0
        input.height(objTD.height());   //文本框的高度为当前td单元格的高度
        input.width(objTD.width());    // 宽度为当前td单元格的宽度
        input.css("font-size", "16px");    // 文本框的内容文字大小为16px
        input.css(&qu