1

Хочу редактировать данные в таблице при помощи диалогового окна. Вот таблица и кнопка, по которой происходит добавление ячеек в таблицу.

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

Вот сам диалог с обработчиком

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

У меня проблема, я не понимаю, почему данные из диалогового окна не передаются на форму в таблицу? Посмотрите, пожалуйста, где может быть ошибка??

1 ответ 1

1

а у меня приведенный код работает :)

намного читабельнее:

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.