基于JQuery制作可编辑的表格特效

2020-05-23 06:19:54易采站长站整理

        input.keyup(function(event) {
            // 获取键值
            var keyEvent = event || window.event;
            var key = keyEvent.keyCode;
            //获得当前对象
            var input_blur = $(this);
            switch (key)
                    {
                case 13://按下回车键,保存当前文本框的内容
                    var newText = input_blur.val();
                    td.html(newText);
                    break;
                case 27://按下 esc键,取消修改,把文本框变成文本
                    td.html(oldText);
                    break;
            }
        });
    });
});

第二种单击表格可以编辑的方法


$(document).ready(function(){
    var tds = $(“td”);
    tds.click(tdClick);
});
function tdClick(){
    var tdnode = $(this);
    var tdtext = tdnode.text();
    tdnode.html(“”);
    var input = $(“<input>”);
    input.val(tdtext); //    input.attr(“value”,tdtext);
    input.keyup(function(event){
        var myEvent = event || window.event;
        var keyCode = myEvent.keyCode;
        if(keyCode == 13){
            var inputnode = $(this);
            var inputtext = inputnode.val();
            var td = inputnode.parent();