Добавить кнопку редактирования в добавляемую таблицу

У меня есть таблица пользователей, которая была сериализована и отправлена в виде JSON. JSON фильтруется с помощью AJAX, и таблица добавляется.

В настоящее время я добавил ссылку href к тегу <a> в таблице. Вместо этого я хочу добавить событие click, которое открывает всплывающий модал с формой обновления, содержащей информацию о пользователе. После отправки формы я хочу использовать Ajax для отправки json для обновления БД, удаления этой строки из таблицы и закрытия модала.

function putTableData(response) {
  let row;
  $("#table_body").html("");
  
  if (response["data"].length > 0) {
    $.each(response["data"], function(a, b) {
      row = `<tr class="hover:bg-indigo-50">
        <td class="px-6 py-4 whitespace-nowrap hover:bg-indigo-50">
          <div class="flex items-center">
            <div class="ml-2">
              <div class="text-sm leading-5 font-medium text-gray-900">${b["first_name"]} ${b["last_name"]}</div>
              <div class="text-sm leading-5 text-gray-500">${b["email"]}</div>
            </div>
          </div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap">
          <div class="text-sm text-gray-900">${b["address"]}</div>
          <div class="text-sm text-gray-500">${b["city"]} ${b["state"]} ${b["zipcode"]}</div>
        </td>
        <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
          +1${b["phone"]}
        </td>
        <td class="px-6 py-4">
          <a class="p-2 mr-3" href="/${b['pk']}/update/">
           Edit
          </a>
        </td>
      </tr>`;

      $("#table_body").append(row)

Вернуться на верх