在表格中单击表单外的操作

Action on clicking out of a form, inside a table

本文关键字：操作 表单 单击 表格      更新时间：2023-09-26

从这里开始，需要处理所有相关代码：http://jsfiddle.net/baruck/43787/我正在构建一个网络应用程序，在某个时候用户需要注册一些项目。这是一个很大的表格，表格的这一部分在一张桌子里面。每个输入标记都在一个td内，后面跟一个span。当用户单击编辑某一行时，脚本会隐藏跨度（保存输入值）并显示输入。当用户单击另一行（或创建一个新行）时，脚本会选择输入的值添加/更改span文本并隐藏输入并显示span。

当用户点击某一行时，它首先选择添加"编辑"类的行，第二次点击将焦点放在输入上。

当我点击表格时，一切都很顺利；问题是当我在包含输入的表之外单击时，或者在活动行上的最后一个输入之后点击选项卡时。焦点转移到其他地方。。。

当这两个操作中的一个发生时，我想"停用行"，即从该行的输入中提取值，在span中添加/更改它们，隐藏输入并显示span。

摘要：当用类"可编辑"在表外单击时，或者当在行的最后一个输入上"制表符离开"时，需要启动此功能。。。

function deactivateRows() {
    //Deactivate editing on the rows
    $('table.editable tr.editing').removeClass('editing');
    $('table.editable').find('td').not('.delete').each(function () {
        $(this).find('input').each(function () {
            var inputContent = $(this).val();
            $(this).prop('disabled', true).addClass('hide').attr('value', inputContent);
            $(this).parent().find('span').html(inputContent).removeClass('hide');
        });
    });
}

我认为诀窍是从点击的元素或模糊事件的相关元素向上遍历DOM，看看你是否点击了table.editable

var isInsideEditable = function (el) {
    return !!el && $(el).closest('table.editable').length > 0;
};
$('select, input, textarea', '.editable').on('blur', function (e) {
    if (!isInsideEditable(e.relatedTarget))
        deactivateRows();
});
$(window).on('click', function (e) {
    if (!isInsideEditable(e.target))
        deactivateRows();
    return false;
});
相关文章：