Javascript jQuery数据表，编辑所选行'；s td带有文本框

我有一个只有一列的jQuery数据表。选中一行后，将打开一个带有文本框的面板。此文本框将自动填入所选td的名称。我正试图通过文本框更改所选行的名称。示例：我选择第二行（名为test），然后转到文本框，输入“Apples”，test现在将是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>

---

将单击的

td

存储在全局变量和添加表单提交事件中的行上，然后分配存储变量的输入值

var行=null；
$（“#数据表tr td”）。单击（函数（）{
$（“#groupname”）.val（$（this.text（））；
行=$（该行）；
});
$（“#updateBtn”）。单击（函数（）{
如果（行！=null）{
row.text（$（“#groupname”）.val（））；
}
})

名称
全部的
试验
测试3
设置
姓名：
更新

谢谢！有没有办法改变它而不是按回车键来改变它，一个按钮怎么样？无论如何，这让我现在指向了正确的方向！是的，你可以有按钮。你想那样吗？是的，求你了！我很感激！

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

(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];
}
})();