获取动态 jQuery 表格单元格值答案

【问题标题】：get dynamic jQuery table cell value获取动态 jQuery 表格单元格值
【发布时间】：2016-01-12 18:05:08
【问题描述】：

我有一个动态更改为 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

【问题讨论】：

仅仅改变对应td的文本内容并不会改变与你的数据表关联的对象的数据。改为更改数据。

标签： jquery datatables

【解决方案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/

如有任何问题，请随时提出。

【讨论】：