jQuery數據表，使用文本框編輯選定行的td

Question

我只有一個列的jQuery數據表。 選擇一行后，它將打開一個帶有文本框的面板。 該文本框將自動填充所選td的名稱。 我正在嘗試通過文本框來更改所選行的名稱。 例如：我選擇第二行（命名為test），然后轉到文本框，然后輸入“ Apples”，現在測試將為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>