jQuery Datatable無法編輯新創建的行

Question

我目前正在使用jQuery數據表來制作要顯示的表。 目前，我已經對其進行了設置，因此當我在表格中選擇一行時，該行中的文本會出現在另一個面板的文本框中。 然后，我可以輸入其他內容，然后按“保存”，它會更改該行中的文本。 我當前的問題是，當我通過按鈕添加新行時，無法編輯新行中的文本，但是可以選擇它...例如：我有3行，選擇Test1，就可以成功更改文本。 然后，單擊“添加行”，然后選擇新行並嘗試更改該行中的文本，它更改了先前選擇的行的文本（加載時在表中的行）。 如何解決此問題？ 我已經研究了cell.data，cell.edit，但這是出於各種原因我目前未使用的Editor。

表：

<div class="panel-body">
                <table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd">
                            <td>All</td>
                        </tr>
                        <tr class="even">
                            <td>Test1</td>
                        </tr>
                        <tr class="odd">
                            <td>Test2</td>
                        </tr>
                    </tbody>
                </table>
                <div class="col-md-8 col-md-offset-1">
                    <button type="submit" class="btn btn-sm btn-primary m-r-5" id="addbtn" >New Group</button> 
                </div>
            </div>
//Text box
<div class="form-group">
                <label class="col-md-4 control-label">Group Name:</label>
                    <div class="col-md-8">
                        <input type="text" id="groupname" class="form-control" value="Name"/>
                    </div>
            </div>

使所選行的文本顯示在文本框中的代碼：

(function () {

      var table = document.querySelector('#data-table');
      var textbox = document.querySelector('#groupname');

      table.addEventListener('click', onTableClick);

      function onTableClick (e) {
        var tr = e.target.parentElement;

        var data = [];
        for (var td of tr.children) {
          data.push(td.innerHTML);
        }
        textbox.value = data[0];
      }
    })();

更改所選行的文本：

    var row = null;

    $("#data-table tr td").click(function() {
      $("#groupname").val($(this).text());
      row = $(this);


        $("#saverow").click(function() {
          if (row != null) {
            row.text($("#groupname").val());
          }
        });
    });

添加行：

$("#addbtn").click( function() {
    var t = $('#data-table').DataTable();

$('#data-table').dataTable();
    t.row.add( [
        "New Group"
     ] ).draw( false );
});

Answer 1

為什么在表點擊時有這兩個矛盾的陳述？

1. 將組名輸入設置為剛單擊的行用戶的第一列

    function onTableClick (e) { ... textbox.value = data[0]; ... } 

   在這里， textbox.value = data[0]似乎正在將'#groupname'輸入字段的文本值設置為剛剛單擊的任何行的第一列。

2. 將輸入設置為我們單擊的單元格的文本

    $("#data-table tr td").click(function() { ... row.text($("#groupname").val()); ... }); 

在這里， row.text($("#groupname").val()); 似乎正在將'#groupname'輸入字段的文本值設置為我們單擊的確切列的文本。

順便說一句，這里的row是一個誤導性的變量名，因為實際元素$(this)所指的是任何td ，它是tr的子代，而tr是'#data-table'的子代。 因此，實際上$(this)是列或表單元格； 稱它為row是令人困惑的。

Answer 2

如前所述這里 ，通過andreister，當我們使用。點擊，一個單獨的處理程序獲取的選擇相匹配的每一個元素創建的。 那意味着

1. 許多匹配的元素將創建許多相同的處理程序，從而增加內存占用量
2. 動態添加的項目將沒有處理程序-即，在上面的html中，新添加的“警告！” 除非您重新綁定處理程序，否則按鈕將不起作用。

但是，當我們使用.on時，所有與您的選擇器匹配的元素（包括動態創建的元素）都有一個處理程序。

所以我改變了

$("#data-table tr td").click(function() {

至

$("#data-table").on('click', 'td', function() {

解決我的問題。