jQuery Datatable無法編輯新創建的行

Question

我目前使用jQuery數據表來創建我正在顯示的表。目前，我已經設置了它，所以當我在表中選擇一行時，該行中的文本出現在另一個面板的文本框中。然後，我可以輸入其他內容並按下「保存」，它會更改該行中的文本。我目前的問題是，當我通過按鈕添加一個新的行，我不能編輯新行中的文本，我可以選擇它但是... 例如：我有3行，我選擇Test1，我可以成功更改文本。然後單擊添加行，然後選擇新行並嘗試更改該行中的文本，它會更改之前選定的行文本（加載時位於表中的行）。 我該如何解決這個問題？我查看了cell.data，cell.edit，但那是因爲各種原因我目前沒有使用的編輯器。

表：

<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

正如here所述，通過andreister，當我們使用.click時，爲每個匹配選擇器的單個元素創建一個單獨的句柄。這意味着

1. 許多匹配的元素會產生許多相同的處理，從而提高內存佔用
2. 動態添加的項目將不會有處理程序 - ！「警報」，即，在上面的html新增除非重新綁定處理程序，否則按鈕將不起作用。

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

因此，我改變

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

到

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

解決我的問題。

Answer 2

爲什麼你在桌面點擊時有這兩個相互衝突的陳述？

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這是'#data-table'孩子的孩子。所以真的$(this)是一個列或表格單元格;稱它爲row令人困惑。