如何使用EJS实现表格行的编辑与删除功能？

步骤1：添加编辑模态框 #

在页面中插入Bootstrap模态框（适配原代码的Bootstrap按钮样式），用于承载编辑表单：

<!-- 编辑电影模态框 -->
<div class="modal fade" id="editMovieModal" tabindex="-1" aria-labelledby="editMovieModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="editMovieModalLabel">编辑电影信息</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <form id="editMovieForm">
        <div class="modal-body">
          <!-- 隐藏存储电影ID -->
          <input type="hidden" id="edit_movie_id" name="movie_id">
          <div class="mb-3">
            <label for="edit_movie_name" class="form-label">电影名称</label>
            <input type="text" class="form-control" id="edit_movie_name" name="movie_name" required>
          </div>
          <div class="mb-3">
            <label for="edit_rating" class="form-label">评分</label>
            <input type="number" class="form-control" id="edit_rating" name="rating" min="0" max="10" step="0.1" required>
          </div>
          <div class="mb-3">
            <label for="edit_cast" class="form-label">演员</label>
            <input type="text" class="form-control" id="edit_cast" name="cast" required>
          </div>
          <div class="mb-3">
            <label for="edit_genre" class="form-label">类型</label>
            <input type="text" class="form-control" id="edit_genre" name="genre" required>
          </div>
          <div class="mb-3">
            <label for="edit_release_date" class="form-label">上映日期</label>
            <input type="date" class="form-control" id="edit_release_date" name="release_date" required>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
          <button type="submit" class="btn btn-primary">保存修改</button>
        </div>
      </form>
    </div>
  </div>
</div>

步骤2：修正原表格的Edit按钮 #

原表格中id="edit-movie"会因循环重复生成，需改为class；同时给Edit按钮添加模态框触发属性：

<!-- 修改原表格的Edit按钮所在单元格及按钮 -->
<td class="text-dark edit-movie">
  <button type="button" class="btn btn-secondary edit-btn" data-bs-toggle="modal" data-bs-target="#editMovieModal">
    Edit
  </button>
</td>

步骤3：编写JavaScript交互逻辑 #

实现点击按钮填充表单、提交后更新表格行的功能：

document.addEventListener('DOMContentLoaded', function() {
  const editButtons = document.querySelectorAll('.edit-btn');
  const editForm = document.getElementById('editMovieForm');

  // 绑定编辑按钮点击事件，填充表单数据
  editButtons.forEach(btn => {
    btn.addEventListener('click', function() {
      const row = this.closest('tr');
      // 提取当前行数据
      const movieId = row.querySelector('td:first-child').textContent;
      const movieName = row.querySelectorAll('td.text-dark')[0].textContent;
      const rating = row.querySelectorAll('td.text-dark')[1].textContent;
      const cast = row.querySelectorAll('td.text-dark')[2].textContent;
      const genre = row.querySelectorAll('td.text-dark')[3].textContent;
      const releaseDate = row.querySelectorAll('td.text-dark')[4].textContent;

      // 填充模态框表单
      document.getElementById('edit_movie_id').value = movieId;
      document.getElementById('edit_movie_name').value = movieName;
      document.getElementById('edit_rating').value = rating;
      document.getElementById('edit_cast').value = cast;
      document.getElementById('edit_genre').value = genre;
      document.getElementById('edit_release_date').value = releaseDate;
    });
  });

  // 绑定表单提交事件，更新数据
  editForm.addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);
    const movieId = formData.get('movie_id');

    // 发送更新请求到后端（替换为你的实际接口地址）
    fetch(`/api/movies/${movieId}`, {
      method: 'PUT',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(Object.fromEntries(formData))
    })
    .then(res => res.json())
    .then(updatedData => {
      // 更新表格对应行的数据
      const targetRow = document.querySelector(`tr td:first-child:contains('${movieId}')`).closest('tr');
      targetRow.querySelectorAll('td.text-dark')[0].textContent = updatedData.movie_name;
      targetRow.querySelectorAll('td.text-dark')[1].textContent = updatedData.rating;
      targetRow.querySelectorAll('td.text-dark')[2].textContent = updatedData.cast;
      targetRow.querySelectorAll('td.text-dark')[3].textContent = updatedData.genre;
      targetRow.querySelectorAll('td.text-dark')[4].textContent = updatedData.release_date;

      // 关闭模态框
      const modal = bootstrap.Modal.getInstance(document.getElementById('editMovieModal'));
      modal.hide();
    })
    .catch(err => {
      console.error('编辑失败:', err);
      alert('编辑失败，请重试');
    });
  });
});

注意事项 #

• 确保页面已引入Bootstrap的CSS、JS及Popper.js（模态框依赖）
• 替换fetch中的后端接口地址为你的实际更新接口
• 若后端返回的日期格式与表单date输入框不兼容，需提前做格式转换

内容的提问来源于stack exchange，提问作者Deep Mandal