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

Question

我有问题。它是关于编辑表中的选定行。 表格中的每一行都在底部编辑自我。 如果单击此按钮，我可以看到编辑窗口以编辑表中的选定数据行。  我正在使用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
});