JQuery实现可编辑表格

最新推荐文章于 2025-09-05 11:22:47 发布

转载最新推荐文章于 2025-09-05 11:22:47 发布 · 62 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/wanghk/archive/2012/05/25/2518740.html

文章标签：

#javascript #ViewUI

本文介绍使用JQuery实现表格单元格的编辑功能。通过点击表格单元格转换为输入框，支持输入文字并能通过Enter键保存更改或Esc键取消编辑，同时禁用了表单的默认提交行为。

JQuery实现可编辑表格

/// <reference path="jquery-1.4.1.min.js" />
$(function (event) {
    //$("tbody tr:even").css("background-color", "#ece9d8");
    $(document).keydown(function (event) {
        if (event.keyCode == 13) {
            $('form').each(function () { event.preventDefault(); });
        }
    });//屏蔽回车提交表单事件
    var numTd = $(".edittd");
    numTd.click(function (envet) {
        var tdObj = $(this);
        if (tdObj.children("input").length > 0) {
            return false;
        }
        var txtold = tdObj.text();
        var inputObj = $("<input type='text'/>").css("border", "none").width(tdObj.width())
         .css("font-size", "14px").css("background-color", "#F0F0F0").css("color", "blue").val(txtold);
        tdObj.html("").append(inputObj);
        inputObj.trigger("focus");
        inputObj.click(function () {
            return false;
        });
        inputObj.keyup(function (event) {//enter 保存  esc取消
            var keycode = event.which;
            if (keycode == 13) {
                var inputText = $(this).val();
                tdObj.text(inputText);
            }
            if (keycode == 27) {
                tdObj.html(txtold);
            }
        });
    });

});