Теперь давайте начнем с того, что не так с решением ОП. OP пытается добавить список событий к элементу, который еще не был создан. Мы слушаем данные Dynami c через делегирование события .
Итак, для этого:
<tbody>
// dynamic <tr></tr>
</tbody>
Мы бы привязали нашего слушателя к какому-либо из его родителей (не обязательно ближайший родитель), то есть <tbody> в данном случае, который является частью dom, когда мы запускаем наш код js.
Я уверен, что есть различные способы сделать это, но Я попробовал, придерживаясь вашего фактического решения. Проверьте это:
function addToTable() {
// insertion into row
let name = $("#insert-name").val();
let surname = $("#insert-surname").val();
let row = `<tr>
<td>${name}</td>
<td>${surname}</td>
<td><button>Edit</button></td>
</tr>`;
$('#tbody').append(row);
// clearing input fields
$("#insert-name").val("");
$("#insert-surname").val("");
}
function editTable() {
let name = $("#insert-name").val();
let surname = $("#insert-surname").val();
// looking for tr with "active" class
let row = $("#tbody tr.active");
let rowArr = row[0].children;
rowArr[0].innerHTML = name;
rowArr[1].innerHTML = surname;
row[0].classList.remove("active");
// clearing input fields
$("#insert-name").val("");
$("#insert-surname").val("");
}
$("#btnAdd").on('click', function() {
let isEdit = $("#btnAdd").hasClass("edit");
if (isEdit) {
editTable();
} else {
addToTable();
}
// remove class "edit"
$("tbody").removeClass("edit");
});
// Adding event listner to the parent (event delegation)
$("#tbody").on('click', function(e) {
$("#btnAdd").addClass("edit");
// pass table data to input fields
let row = e.target.closest("tr");
row.classList.add("active");
let rowArr = row.children;
$("#insert-name").val(rowArr[0].innerHTML);
$("#insert-surname").val(rowArr[1].innerHTML);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form>
<div>
<label for="insert-name">Name:</label>
<input type="text" id="insert-name">
</div>
<div>
<label for="insert-surname">Surname:</label>
<input type="text" id="insert-surname">
</div>
</form>
<button type="button" id="btnAdd">
Add to Table
</button>
<table>
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Surname</th>
<th scope="col">Edit</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>