Question

我正在使用DataTables.Net插件来实现jQuery，我希望添加自定义内联编辑解决方案。我知道有可编辑的插件，但它不是免费的。

我开始关注点击事件操作

function editCell(HTMLTableCellElement) {
    // Check if selected cell is not in edit mode
    if ($(HTMLTableCellElement).hasClass('rowEditable') == false) {
        // Mark cell to edit mode
        $(HTMLTableCellElement).addClass('rowEditable');
        // Make editable
        $(HTMLTableCellElement).html('<input type="text" value="' + $(HTMLTableCellElement).html() + '">');
        // Trigger when cell loose focus
        $(HTMLTableCellElement).blur(function () {
            alert("Record is saving");
            $(HTMLTableCellElement).html($(HTMLTableCellElement).find("input").val());
            $(HTMLTableCellElement).removeClass('rowEditable');
        });
    }
}

调用editCell函数使单元格可编辑

alert("Record is saving");

但我有问题，$(HTMLTableCellElement).blur(function ()永远不会被调用。

编辑：Gene R注意到了，我需要模糊输入而不是细胞本身。解决方法是更改此行

// Focus the cell input
// alert("Record is saving");
$(HTMLTableCellElement).find('input').focus();
$(HTMLTableCellElement).find('input').blur(function ()

到此

publish_actions

Answer 1

我构建了自己的插件，可以实现这一点，并且可以非常快速地实现。

这里是git repo：DataTables CellEdit Plugin

这是我的original post的一个简单例子：

Answer 2

您的HTMLTableCellElement是td，没有blur个事件。此外，当您将代码更改为已显示的内容时，还需要更改事件处理。

在第二种方式中，您实际上是在定义blur事件而不是调用它。您应该在放入此行之前定义blur事件：

$(HTMLTableCellElement).find('input').blur(function ()

而不是以上行，请使用：

$(HTMLTableCellElement).find('input').trigger("blur");

模糊在自定义可编辑单元格中不起作用

2 个答案: