jquery实现点击编辑的表格实例

$(function(){
    $("#content td").click(function(){
        //id为content的元素的td子元素被点击时执行
        var musicId = $(this).parent().attr("musicId");
        //读取musicId
        var td = $(this);
        if ((td.children("input").length > 0) || td.index() == 3) {//如果已经是input,或者是删除那一格，不执行操作
            return;
        }
        var input = $("");
  //定义一个input标签
        var text = td.html();
        //保存原先值
        td.html("");
        //清空
        input.val(text).css("border", "none").width(td.width()).css("font-size", "16px").appendTo(td);
  //设置默认值为原先的值，无边框，与td同宽,字体大小16px,加到td里
        input.trigger("focus").trigger("select");
        //获取焦点，并选中
        var argName = "";
        switch (td.index()) {
   //index方法最出当前被点中被几列
            case 0:
                argName = "musicName";
                break;
            case 1:
                argName = "singer";
                break;
            case 2:
                argName = "sort";
        }
        //根据点第几列，确定参数名
        input.keyup(function(event){
            var keycode = event.which;
            //取键值,回车为13,esc为27
            if (keycode == 27) {
                td.html(text);
                //设回原来的值
            }
            if (keycode == 13) {
                var newValue = $(this).val();
                //取出经编辑的值
                if (td.index() == 2) {
                    if (!isInteger(newValue)) {
                        alert("排序必须是整数");
                        $(this).val(text);
                        return false;
                    }
                }
                td.html(newValue);
 
                var arg = {};
                arg[argName] = newValue;
                arg['musicId'] = musicId;
                $.post("edit_ajax.php", arg);
                //ajax发送更新指令
            }
        });
    });
    $("button.del").click(function(){
        //class为del的button点击时执行
        var musicId = $(this).parent().parent().attr("musicId");
        $(this).parent().parent().remove();
        //移除该行
        var arg = {};
        arg["action"] = "del";
        arg['musicId'] = musicId;
        $.post("edit_ajax.php", arg);
        //ajax发送删除指令
    });
 
});
 
function isInteger(str){
 //判断是否为整数
    var regu = /^[-]{0,1}[0-9]{1,}$/;
    return regu.test(str);
}