Модальное редактирование определенной/той же строки таблицы, где находится кнопка

В этой статье блога мы рассмотрим различные методы реализации функции модального редактирования для конкретной строки таблицы, где расположена кнопка. Мы предоставим примеры кода для каждого метода, чтобы помочь вам понять процесс реализации. Давайте погрузимся!

Метод 1: JavaScript/jQuery

Один из способов реализовать эту функциональность — использовать JavaScript или jQuery. Вот пример фрагмента кода:

<table>
  <tr>
    <td>Row 1</td>
    <td><button class="edit-btn">Edit</button></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td><button class="edit-btn">Edit</button></td>
  </tr>
  <!-- More table rows -->
</table>
<!-- Modal -->
<div id="edit-modal">
  <!-- Modal content -->
</div>
<script>
  // JavaScript
  document.querySelectorAll('.edit-btn').forEach(function(btn) {
    btn.addEventListener('click', function() {
      // Get the parent table row
      var row = this.closest('tr');

      // Get the data of the row for editing
      var rowData = row.querySelector('td:first-child').innerText;

      // Pass the data to the modal
      document.getElementById('edit-modal').innerText = 'Edit: ' + rowData;

      // Show the modal
      // Code to show the modal goes here
    });
  });
</script>

Метод 2: Vue.js

Если вы используете Vue.js, вы можете воспользоваться его реактивным характером для реализации функций модального редактирования. Вот пример фрагмента кода:

<table>
  <tr v-for="(row, index) in rows" :key="index">
    <td>{{ row }}</td>
    <td><button @click="openModal(row)">Edit</button></td>
  </tr>
</table>
<!-- Modal -->
<div v-if="modalOpen">
  <!-- Modal content -->
</div>
<script>
  // Vue.js
  new Vue({
    el: '#app',
    data: {
      rows: ['Row 1', 'Row 2', 'Row 3'], // Example data
      modalOpen: false,
      rowData: ''
    },
    methods: {
      openModal(row) {
        this.rowData = row;
        this.modalOpen = true;
      }
    }
  });
</script>

Метод 3: Реагировать

Если вы предпочитаете использовать React, вы можете использовать его компонентную архитектуру для реализации функций модального редактирования. Вот пример фрагмента кода:

import React, { useState } from 'react';
const Table = () => {
  const [modalOpen, setModalOpen] = useState(false);
  const [rowData, setRowData] = useState('');
  const handleEdit = (row) => {
    setRowData(row);
    setModalOpen(true);
  };
  return (
    <table>
      {rows.map((row, index) => (
        <tr key={index}>
          <td>{row}</td>
          <td>
            <button onClick={() => handleEdit(row)}>Edit</button>
          </td>
        </tr>
      ))}
      {/* Modal */}
      {modalOpen && (
        <div>
          {/* Modal content */}
        </div>
      )}
    </table>
  );
};
export default Table;

Это всего лишь несколько методов, которые можно использовать для реализации функции модального редактирования для конкретной строки таблицы, в которой расположена кнопка. Не забудьте адаптировать примеры кода к вашему конкретному случаю использования.