Question

我目前正在使用jQuery数据表来制作我正在显示的表格。目前我设置了它，所以当我在表格中选择一行时，该行中的文本显示在另一个面板的文本框中。然后我可以输入其他内容并按＆＃34; Save＆＃34;它会更改该行中的文本。我当前的问题是当我通过按钮添加新行时，我无法编辑新行中的文本，但我可以选择它... 示例：我有3行，我选择Test1，我可以成功更改文本。然后我单击Add Row然后选择新行并尝试更改该行中的文本，它会更改先前选择的行的文本（加载时表中的行）。我该如何解决这个问题？我已经查看了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

为什么在点击表格上有这两个相互矛盾的陈述？

将groupname输入设置为行用户中的第一列，只需单击
```
function onTableClick (e) {
    ...
    textbox.value = data[0];
    ...
}
```
在这里，textbox.value = data[0]似乎是将'#groupname'输入字段的文本值设置为刚刚点击的任何行的第一列。

将输入设置为我们点击的单元格文本

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

此处，row.text($("#groupname").val());似乎是将'#groupname'输入字段的文本值设置为我们点击的确切列的文本。

顺便说一下，row这里是一个误导性的变量名称，因为实际的元素$(this)指的是任何td，它是tr的子项， '#data-table'的孩子。所以$(this)真的是一个列或表格单元格;称它为row令人困惑。

Answer 2

如前所述here，andreister，当我们使用.click时，会为匹配选择器的每个元素创建一个单独的处理程序。这意味着

许多匹配元素会创建许多相同的处理程序，从而增加内存占用
动态添加的项目不会有处理程序 - 即，在上面的html中新添加的＆＃34;警告！＆＃34;除非重新绑定处理程序，否则按钮不会起作用。

但是当我们使用.on时，对于与您的选择器匹配的所有元素，都有一个处理程序，包括动态创建的元素。

所以我改变了

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

到

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

解决我的问题。

jQuery Datatable无法编辑新创建的行

2 个答案: