Question

我有一个动态更改为textarea的表格单元格。当用户单击单元格时，它将允许用户输入一些文本：

$("#myDataTable tbody tr td:nth-child(4)").click(function(e) {
    if ($(this).prev().prev().text() == "") {
        var text = $(this).text();
        $(this).text('');
        $('<textarea />').appendTo($(this)).val(text).select().blur(function() {
            var newText = $(this).val();
            $(this).parent().text(newText).find('textarea').remove();
        });
    }
    e.stopPropagation();
});

但是当我点击拒绝按钮获取这些值时。它们是空字符串。事实上，当我查看html时，那些tds中没有任何内容。如何将这些值放入数组中？

这是我的JSFiddle

Answer 1

我从来没有使用过这个插件，但是我瞥了一眼他们的API并想出了这个答案。这似乎是因为您需要更新表的data。来自插件API：

https://datatables.net/reference/api/cell().data()

请注意，当用作setter时，此方法设置要应用的数据表，将其存储在数据源数组或行的对象中，但是没有更新表格内部的数据缓存（即搜索和订购缓存），直到调用draw（）方法。

因此，您似乎直接更新了表，但表数据未更新。在不改变过多代码的情况下，这是一种方法。使用提供的API更新数据，并要求API为您刷新表格。

$("#myDataTable tbody tr td:nth-child(4)").click(function(e) {
    if ($(this).prev().prev().text() == "") {
        var text = $(this).text();
        $(this).text('');
        $('<textarea />').appendTo($(this)).val(text).select().blur(function() {
            var newText = $(this).val();
            var parentCell = $(this).parent();             // <-----
            parentCell.find('textarea').remove();          // <-----
            table.cell(parentCell).data(newText).draw();   // <-----
        });
    }
    e.stopPropagation();
});

我更新的行旁边有<-----。我获取了单元格元素，删除了文本区域，询问表格API的内部单元格表示，通过API设置数据并要求他们使用draw方法刷新表格。

我没有完全挖掘他们的API，但可能有一种方法可以像你一样简单地更新DOM，然后让DataTables API查看表并更新其内部数据。但上述情况也适用。

小提琴：https://jsfiddle.net/3mm4v3q0/4/

随时提出任何问题。

获取动态jQuery表格单元格值

1 个答案: