獲取動態jQuery表格單元格值

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()

注意，作爲設定器使用時，該方法將數據應用到 表，將其存儲在數據源陣列或對象的行中， 但不更新數據表的內部緩存（即 搜索和訂單緩存），直到調用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/

隨意問任何問題。