javascript - jQuery Datatables，使用文本框编辑选定行的 td

Question

我有一个只有一列的 jQuery 数据表。当选择一行时，它会打开一个带有文本框的面板。此文本框会自动填充所选 td 的名称。我正在尝试使用文本框更改所选行的名称。例如:我选择第二行(名为测试)，然后转到文本框并输入“Apples”，测试现在将是苹果。我怎样才能完成这个编辑壮举？我尝试过内联编辑功能，但如果可能的话更喜欢这种方法。

表:

<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr class="odd gradeX">
                            <td>All</td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Test</td>
                        </tr>
                        <tr class="odd gradeX">
                            <td>Test3</td>
                        </tr>
                    </tbody>
                </table>

带有文本框的面板:

<div class="panel-body">
            <form class="form-horizontal" action="/" method="POST">
            <legend>Settings</legend>
            <div class="form-group">
                <label class="col-md-4 control-label">Name:</label>
                    <div class="col-md-8">
                        <input type="text" id="groupname" class="form-control" value="Name"/>
                    </div>
            </div>
            </div>
        </div>

将选定行的 td 自动填充到文本框中的脚本:

(function () {

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

table.addEventListener('click', onTableClick);

function onTableClick (e) {
//console.log(e.currentTarget);
var tr = e.target.parentElement;
//console.log(tr.children);

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

Answer 1

在全局变量中单击行时存储单击的td，并添加表单提交事件，然后分配存储变量的输入值。

var row = null;

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

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

})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table id="data-table" class="table table-striped table-bordered nowrap" width="100%">
  <thead>
    <tr>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr class="odd gradeX">
      <td>All</td>
    </tr>
    <tr class="odd gradeX">
      <td>Test</td>
    </tr>
    <tr class="odd gradeX">
      <td>Test3</td>
    </tr>
  </tbody>
</table>

<div class="panel-body">
  <legend>Settings</legend>
  <div class="form-group">
    <label class="col-md-4 control-label">Name:</label>
    <div class="col-md-8">
      <div class="input-group">
        <input type="text" id="groupname" class="form-control" value="" />
        <span class="input-group-btn">
            <button id="updateBtn" class="btn btn-default" type="button">
              Update
            </button>
        </span>
      </div>
    </div>
  </div>
</div>