I want to edit the data in the table using the dialog box. Here is a table and a button by which cells are added to the table.

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

Here is the dialog with the handler

  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel"> Create a new visual feature </h4> </div> <div class="modal-body"> <form method="post"> <!--<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>--> <table> <tr> <td><label for="visual_feature">Visual Feature</label> </td> <td><input type="text" value='' name="visual_feature" id="visual_feature" class="text ui-widget-content ui-corner-all" required></td> </tr> <tr> <td><label for="typ_feature">Type</label></td> <td><input type="text" value='' name="typ_feature" id="typ_feature" class="text ui-widget-content ui-corner-all" required></td> </tr> <tr> <td><label for="description_feature">Description</label></td> <td><input type="text" value='' name="description_feature" id="description_feature" class="text ui-widget-content ui-corner-all" required></td> </tr> </table> </form> </div> <div class="modal-footer"> <button type="button" class="btn" data-dismiss="modal" aria-hidden="true"> Close </button> <button type="button" class="btn btn-primary" data-dismiss="modal" type="submit" onclick="foo()"> Save changes</button> <script type="text/javascript"> function foo() { if (($('#visual_feature').val() !== "") && ($('#typ_feature').val() !== "") && ($('#description_feature').val() !=="")) { $('#table-visual-features tbody').append('<tr><td>' + $('#visual_feature').val() + '</td>\n\ <td>' + $('#typ_feature').val() + '</td>\n\ <td>' + $('#description_feature').val() + '</td>\n\ <td><button data-toggle="modal" data-target="#myModal_change" class = "action-change"><i class="icon-pencil"></i>edit</button><button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i>remove</button></td>\n\ </tr>'); } } </script> </div> </div> </div> </div>

I have a problem, I do not understand why the data from the dialog box is not transferred to the form in the table? Please look where there may be a mistake ??

    1 answer 1

    and my code works :)

    much more readable:

     <script type="text/javascript"> function foo() { var tbody = $('#table-visual-features tbody'); var lastRow = $('tr:last-child', tbody).clone(false); if (lastRow.length <=0) lastRow = $('<tr><td></td><td></td><td></td><td></td></tr>'); var cells = lastRow.find('td'); cells.eq(0).text($('#visual_feature').val()); cells.eq(1).text($('#typ_feature').val()); cells.eq(2).text($('#description_feature').val()); cells.eq(3).html('<button data-toggle="modal" data-target="#myModal_change" class = "action-change"><i class="icon-pencil"></i>edit</button><button class="btn btn-mini btn-danger action-remove-visual-feature"><i class="icon-trash icon-white"></i>remove</button>'); tbody.append(lastRow); } </script>