5

好的，所以我正在制作一个插件来允许在我的网站中对表格进行内联编辑，到目前为止进展顺利，我已经完成了大部分工作，但我似乎无法正确地从表格中获得焦点。因此，如果有人完成编辑并开始编辑新行或只是单击行外，它应该保存并恢复正常。但是如果我在行上使用模糊，没有响应，但是如果我在元素上使用模糊，它会在人们从一个元素切换到另一个元素时触发

但是，如果我在行上使用 focusout，它也会在有人离开元素时触发，即使他们在同一行中单击也是如此。事件变量下也没有任何内容可以告诉我它将焦点放在哪个元素上，因此我无法与当前行进行比较以查看它们是否只是在该行中单击。

我正在考虑将其保存在 Enter/鼠标单击以保存按钮/开始编辑另一行，但我宁愿让它工作，因为它似乎是一种更好的方法。有人想过吗？请？

4

3 回答 3

3

我将通过为整个文档绑定一个单击处理程序来处理您的请求，然后在我的其他单击事件中添加一个 stopPropagation() 调用。我设置了一个小提琴来演示：http: //jsfiddle.net/NwftK/

<table border="1" width="200">
    <tr id="myRow"><td>Hello</td><td>World</td></tr>
</table>

和 jQuery：

$(function () {
    $("#myRow").on('click', function (e) {
       $(this).css('background-color', 'blue');
        e.stopPropagation();
    }); 

    $(document).on('click', function () {

       $("#myRow").css('background-color', 'red');
    });

});
于 2011-12-07T05:24:17.113 回答
1

问题是即使您有嵌套元素，当您关注其中一个子元素时，focusout 也会在父元素上触发。我能想到的一个解决方案是使用变量来跟踪当前行。伪代码可能会像这样工作：

var row = '';
$(table_element).click(function() { 
                           focused_row = $(this).parent();
                           if(row != '' && focused_row != row) {
                               //code to save edits, user clicked different row
                           }
                           row = focused_row;
                       });
于 2011-12-07T05:11:15.277 回答
0

有两种情况需要检测行何时失去焦点，一种是在表格内，另一种是在离开表格时。

你可以尝试这样的事情：

//store the last visited row
var row = false;

// save the row if has changed
function save () {
    if (row.changed){
        console.log("save");
    }
}

// keep track of the row you are in
// it doesnt work when you leave the table
$("tr").on("focusin", function (e) {
    if (row != this){
        if (row){
            save();
        }
        row = this;
        e.stopPropagation();
    }
});

//keep track whenever the row changes
$("tr").on("change", function (e) {
    this.changed = true;
    console.log("changed");
})

//triggers when you leave the table, you can try to save changes then.
$(document).on("focusin", function (e) {
    var el = $(e.target); //input or element that triggers this event
    var elrow = el.parent().parent()[0]; // try to get the row from that input, ... if its an input
    if (row && row !=elrow) {
        save();
        e.stopPropagation();
    };
})
于 2016-01-27T18:15:08.897 回答