javascript - 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

为什么在表点击时出现这两个相互冲突的语句？

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 很令人困惑。