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

Вот мой html код шаблона :-

<!---this table will show if the user has noting in the searchField--->
  <div class = "default-table" >
    <table class = "table table-stripped table-hover">
      <!---table head--->
      <thead>
        <tr>
          <th>Amount ({{currency}})</th>
          <th>Category</th>
          <th>Description</th>
          <th>Date</th>
          <th></th> <!---this will hold the edit buttons for our expenses--->
          <th></th> <!---this will hold the delete buttons for our expenses--->
        </tr>
      </thead>
      <!---table body--->
      <tbody>
        <!---instead of looping through the expenses here we should loop through the page_obj
        which will give the number of expenses defined in the paginator class per page--->
        {% for expense in page_obj %}
        <tr>
          <td>{{expense.amount}}</td>
          <td>{{expense.category}}</td>
          <td>{{expense.description}}</td>
          <td>{{expense.date}}</td>
          <td><a href="{% url 'expense_edit' expense.id %}" class = "btn btn-primary">Edit</a></td><!---this will hold the edit buttons for our expenses--->
          <td><a href="{% url 'expense_delete' expense.id %}" class = "btn btn-danger">Delete</a></td><!---this will hold the edit buttons for our expenses--->
        </tr>
        {% endfor %}
      </tbody>
    </table>

  </div>

  <!---this table will show if the user tries to search expenses in the searchField--->
  <div class="table-output">
    <table class = "table table-stripped table-hover">
      <!---table head--->
      <thead>
        <tr>
          <th>Amount ({{currency}})</th>
          <th>Category</th>
          <th>Description</th>
          <th>Date</th>
          <th></th> <!---this will hold the edit buttons for our expenses--->
          <th></th> <!---this will hold the delete buttons for our expenses--->
        </tr>
      </thead>
      <!---table body--->
      <tbody class= "table-body">
          <!---show the contents of the search result in the table dynamically--->
      </tbody>
    </table>
  </div>

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

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