Jquery可编辑表格

来源:百度文库 编辑:神马文学网 时间:2024/04/24 21:14:49

$(function(){
    //隔行换色
    $("tbody tr:odd").css("background-color","#eee");
    var numId = $("tbody td");
    numId.click(function(){
        var tdIns = $(this);
        if ( tdIns.children("input").length>0 ){ return false; }       
        var inputIns = $(""); //需要插入的输入框代码
        var text = $(this).html();        
        inputIns.width(tdIns.width()); //设置input与td宽度一致
        inputIns.val(tdIns.html()); //将本来单元格td内容copy到插入的文本框input中
        tdIns.html(""); //删除原来单元格td内容
        inputIns.appendTo(tdIns).focus().select(); //将需要插入的输入框代码插入dom节点中
        inputIns.click(function(){ return false;});
        //处理Enter和Esc事件
        inputIns.keyup(function(event){
                var keycode = event.which;
                if( keycode == 13 ){ var inputText = $(this).val(); tdIns.html(inputText);}
                if( keycode == 27 ){ tdIns.html(text);}
        });
    });
});