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

Question

I have a problem. It is about edit selected row in a table. Each row in the table has at the end botton to edit self. If I click this button I can see edit window to edit selected data row from table. I am using Bootstrap and have a problem. How to get edit-window and after click save on edit window to replace selected row with new values??
It is best to look at my example!

This is my **DEMO

Button to add new row

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

Table to add new row.

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

Here is a value, which one has in selected row in a table. This value I would like to edit using edit window using 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

You need a reference to the row you are going to edit. What you could do for instance, is something like this:

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