如何使用编辑窗口编辑表中的行

Question

我有个问题。 它是关于编辑表中的选定行。 表格中的每一行都在末尾的botton中编辑自己。 如果单击此按钮，我将看到编辑窗口以编辑表中的选定数据行。 我正在使用Bootstrap并遇到问题。 如何获得编辑窗口，然后在编辑窗口上单击“保存”以将所选行替换为新值？
最好看看我的例子！

这是我的** DEMO

按钮以添加新行

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  + Define a new visual feature
</button>

在表中添加新行。

    <table class="table table-striped" id="table-visual-features">
        <thead>
            <tr>
                <th>Visual Feature</th>
                <th>Type [currently not used]</th>
                <th>Description</th>
                <th>Actions</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>

这是一个值，该值在表的选定行中具有。 我想使用Bootstrap在编辑窗口中编辑此值

    console.log($(this).closest('tr').children('td').eq(0).text());
    console.log($(this).closest('tr').children('td').eq(1).text());
    console.log($(this).closest('tr').children('td').eq(2).text())

Answer 1

您需要对要编辑的行的引用。 例如，您可以做的是这样的：

var $table = $('#table-visual-features');
$table.on('click', 'tbody tr button[data-target=#edit]', function (event) {
    var $rows = $table.find('tbody tr');
    var $thisRow = $(this).parents('tr').eq(0);
    var index = $rows.index($thisRow);
    // open your modal here; now you know which row to edit
});