Javascript 在表格外、表格内单击时的操作

从这里开始，是对所有相关代码的修改： 我正在构建一个webapp，在某个时候用户需要注册一些项目。 这是一个大表单，表单的这一部分在一个表中。 每个输入标记位于一个td内，后面跟着一个跨度。当用户单击编辑某一行时，脚本会隐藏跨度（保存输入值）并显示输入。当用户单击另一行（或创建新行）时，脚本将拾取输入值添加/更改跨距文本并隐藏输入并显示跨距

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

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

当这两个动作中的一个发生时，我想“停用行”，这意味着从该行的输入中提取值，在范围中添加/更改它们，隐藏输入并显示范围

摘要：当使用“可编辑”类在表外单击或在最后一行输入上单击“tab away”时，需要启动此功能

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;
});

---

伙计，非常感谢。它只是起作用了。我只是添加了一些东西来完成其他功能（如删除空行）。。。但是你的建议很管用。“最终版本”可以在这里看到：很好-很高兴它是有用的。