Как создать простую кнопку редактирования на Crud? - PullRequest
Новая
       20

Как создать простую кнопку редактирования на Crud?

0 голосов
/ 21 июня 2019

Я пытаюсь сделать простой Крюд для моей домашней работы. большая часть моего кода работает правильно по большей части, кроме кнопки редактирования. редактирует только первый ряд. ниже я предоставляю свой код TS вместе с моим HTML. для HTML я использую модальные окна. поэтому каждый раз, когда я нажимаю на кнопки редактирования. появится модальная воля 

function create() {
  let user: string = String($("#username").val());
  let data: JQuery = $("<tr id='crudData'><td>" + user + "</td><td><button class='btn btn-info' data-toggle='modal' data-target='#crudModal'>Bearbeiten</button></td></tr>");
  $("#crud").append(data);
}


function edit() {
  let user2: string = String($("#username2").val());
  let data2: JQuery = $("<tr id='crudData'><td>" + user2 + "</td><td><button class='btn btn-info' data-toggle='modal' data-target='#crudModal'>Bearbeiten</button></td></tr>");
  $("#crudData").replaceWith(data2);
}

$("#userbstg").on("click", create);
$("#saveEdit").on("click", edit);
<section>
  <div class="container">
    <div class="row">
      <div class="col-md-8">
        <h3 class="section-heading">Aufgabe - Usermanager</h3>
        <label for="username">Username:</label>
        <input id="username" class="form-control col-md-3" type="text">
        <button id="userbstg" class="btn btn-info">Add</button>
        <table id="crud" class="col-md-4 table">
          <tr>
            <th class="col-2" id="user">User</th>
            <th class="col-2" id="edit"></th>
          </tr>
        </table>
      </div>
    </div>
  </div>
  <div class="modal fade" id="crudModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          <label for="username2">Username:</label>
          <input id="username2" class="form-control col-md-12" type="text">
          <button type="button" id="saveEdit" class="btn btn-default" data-dismiss="modal">Save</button>
        </div>
      </div>
    </div>
  </div>
</section>
...