выбрать / удалить строку в таблице html javascript

Question

Привет, я создал редактируемую таблицу, следуя некоторым учебникам, и теперь я хочу сделать строки выбираемыми и удаляемыми.

Может кто-нибудь мне помочь? У вас есть совет, чтобы сделать эту таблицу красивой?

это мой сценарий:

<!-- tableau editable -->

$(function () {
  $("#btn_newrow").click(function(){
    var test ="<tr><td>Repère</td><td>Qantité</td><td>Segments</td><td>Fixations latérales</td><td>Dalle à gauche</td><td>Commentaires</td></tr>";
    $(".editableTable tbody").append(test);
  });

  $('.editableTable').on('dblclick', 'td', function () {

    var OriginalContent = $(this).text();

    $(this).addClass("cellEditing");
    $(this).html("<input type='text' value='" + OriginalContent + "' />");
    $(this).children().first().focus();

    $(this).children().first().keypress(function (e) {
      if (e.which == 13) {
        var newContent = $(this).val();
        $(this).parent().text(newContent);
        $(this).parent().removeClass("cellEditing");
      }
    });

    $(this).children().first().blur(function(){
      $(this).parent().text(OriginalContent);
      $(this).parent().removeClass("cellEditing");
    });

  });
});

<table class="editableTable">
  <thead>
    <tr>
      <th>Repère</th>
      <th>Qantité</th>
      <th>Segments</th>
      <th>Fixations latérales</th>
      <th>Dalle à gauche</th>
      <th>Commentaires</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>asdf</td>
      <td>asdf2</td>
      <td>asdf3</td>
      <td>asdf4</td>
      <td>asdf5</td>
      <td>asdf6</td>
    </tr>
  </tbody>
</table>

<br/><br/>

<input id="btn_newrow" type="button" name="add" class="add action-button" value="Ajouter">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

и результат здесь, вы можете увидеть таблицу и кнопку добавления только внизу: