jQuery: Как динамически добавлять или удалять строки внутри таблицы

Используйте метод jQuery .append() или .remove().

Вы можете использовать метод jQuery .append() для добавления или добавления строк внутри таблицы HTML. Аналогичным образом вы можете использовать метод .remove() для удаления или удаления строк таблицы, а также всего, что внутри него из DOM динамически с помощью jQuery. Посмотрите следующий пример.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Add / Remove Table Rows</title>
<style type="text/css">
table{
  width: 100%;
  margin: 20px 0;
  border-collapse: collapse;
}
table, th, td{
  border: 1px solid #cdcdcd;
}
table th, table td{
  padding: 5px;
  text-align: left;
}
</style>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".add-row").click(function(){
    var name = $("#name").val();
    var email = $("#email").val();
    var markup = "<tr><td><input type='checkbox' name='record'></td><td>" + name + "</td><td>" + email + "</td></tr>";
    $("table tbody").append(markup);
  });

  // Find and remove selected table rows
  $(".delete-row").click(function(){
    $("table tbody").find('input[name="record"]').each(function(){
      if($(this).is(":checked")){
        $(this).parents("tr").remove();
      }
    });
  });
});  
</script>
</head>
<body>
<form>
  <input type="text" id="name" placeholder="Name">
  <input type="text" id="email" placeholder="Email Address">
  <input type="button" class="add-row" value="Add Row">
</form>
<table>
  <thead>
    <tr>
      <th>Select</th>
      <th>Name</th>
      <th>Email</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" name="record"></td>
      <td>Peter Parker</td>
      <td>peterparker@mail.com</td>
    </tr>
  </tbody>
</table>
<button type="button" class="delete-row">Delete Row</button>
</body> 
</html>

Select	Name	Email
	Peter Parker	peterparker@mail.com