Как добавить данные редактирования и удаления в таблицу HTML с помощью JavaScript?

Основные теги HTML Программирование и разработка

В веб-разработке часто необходимо обрабатывать данные в таблице HTML. JavaScript предлагает надежные возможности для динамического включения, изменения и удаления данных в таблице. Эти функции позволяют манипулировать содержимым таблицы без необходимости обновления всей страницы, что обеспечивает беспрепятственное и эффективное взаимодействие с пользователем.

HTML-таблица используется для представления табличных данных на веб-странице. Он состоит из строк и столбцов, организованных в виде сетки. Таблицы обычно используются для отображения данных в структурированном виде, например, в финансовых отчетах, списках продуктов и расписаниях. В этой статье мы создадим пример того, как добавлять, редактировать и удалять строки таблицы в Javascript.

Подход: следующий подход будет использоваться для создания динамической таблицы для добавления или удаления строки, а также для редактирования данных в строке таблицы:

  • Метод addData()получает данные из полей ввода и создает новую строку в таблице, содержащую предоставленную информацию.
  • Кнопка «Редактировать» запускает функцию editData(), которая заменяет ячейки таблицы имени и адреса электронной почты предварительно заполненными полями ввода. Текст кнопки меняется на «Сохранить», и при нажатии вызывается функция saveData().
  • Функция saveData()сохраняет отредактированные данные, извлекая входные значения, обновляя ячейки таблицы, сбрасывая кнопку и повторно вызывая editData().
  • При нажатии кнопки «Удалить» функция deleteData() удаляет связанную строку из таблицы.

 

Пример: в этом примере мы увидим, как добавлять редактирование и удалять данные в таблице HTML с помощью JavaScript. Сначала мы принимаем ввод от пользователя, а затем любые данные, введенные пользователем, отображаются в таблице.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>
          User Data Management
      </title>
    <style>
        body {
            margin: 4rem;
        }
 
        #formContainer {
            margin-bottom: 20px;
        }
 
        label {
            display: block;
            margin-top: 10px;
        }
 
        input,
        textarea {
            width: 300px;
            padding: 8px;
            margin-top: 5px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
 
        button {
            margin: 10px;
            padding: 8px 16px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
 
        button:hover {
            background-color: #45a049;
        }
 
        table {
            border-collapse: collapse;
            margin-bottom: 20px;
            width: 100%;
        }
 
        th,
        td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
        }
 
        th {
            background-color: #4CAF50;
            color: #fff;
        }
    </style>
</head>
 
<body>
    <h1 style="color: green;">
        Geekforgeeks!!
    </h1>
    <h2>User Data Management</h2>
 
    <div id="formContainer">
        <label for="nameInput">
            Name:
        </label>
        <input type="text"
               id="nameInput"
               placeholder="Enter your name">
        <label for="emailInput">
            Email I'd:
        </label>
        <input type="email"
               id="emailInput"
               placeholder="Enter your email">
        <label for="numberInput">
            Mobile Details:
        </label>
        <input type="text"
               id="numberInput"
               placeholder="Enter your mobile details">
        <label for="addressInput">
            Address:
        </label>
        <textarea id="addressInput"
                  placeholder="Enter your address">
        </textarea>
        <button onclick="addData()">
              Add
          </button>
    </div>
    <table id="outputTable">
        <tr>
            <th>Name</th>
            <th>Email</th>
            <th>Mobile Details</th>
            <th>Address</th>
            <th>Action</th>
        </tr>
    </table>
    <script>
        function addData() {
            // Get input values
            let name =
                document.getElementById("nameInput").value;
            let email =
                document.getElementById("emailInput").value;
            let mobile =
                document.getElementById("numberInput").value;
            let address =
                document.getElementById("addressInput").value;
           
            // Get the table and insert a new row at the end
            let table = document.getElementById("outputTable");
            let newRow = table.insertRow(table.rows.length);
           
            // Insert data into cells of the new row
            newRow.insertCell(0).innerHTML = name;
            newRow.insertCell(1).innerHTML = email;
            newRow.insertCell(2).innerHTML = mobile;
            newRow.insertCell(3).innerHTML = address;
            newRow.insertCell(4).innerHTML =
                '<button onclick="editData(this)">Edit</button>'+
                '<button onclick="deleteData(this)">Delete</button>';
           
            // Clear input fields
            clearInputs();
        }
 
        function editData(button) {
           
            // Get the parent row of the clicked button
            let row = button.parentNode.parentNode;
           
            // Get the cells within the row
            let nameCell = row.cells[0];
            let emailCell = row.cells[1];
            let mobileCell = row.cells[2];
            let addressCell = row.cells[3];
           
            // Prompt the user to enter updated values
            let nameInput =
                prompt("Enter the updated name:",
                    nameCell.innerHTML);
            let emailInput =
                prompt("Enter the updated email:",
                    emailCell.innerHTML);
            let numberInput =
                prompt("Enter the updated mobile details:",
                    mobileCell.innerHTML
                );
            let addressInput =
                prompt("Enter the updated address:",
                    addressCell.innerHTML
                );
           
            // Update the cell contents with the new values
            nameCell.innerHTML = nameInput;
            emailCell.innerHTML = emailInput;
            mobileCell.innerHTML = numberInput;
            addressCell.innerHTML = addressInput;
        }
        function deleteData(button) {
           
            // Get the parent row of the clicked button
            let row = button.parentNode.parentNode;
 
            // Remove the row from the table
            row.parentNode.removeChild(row);
        }
        function clearInputs() {
           
            // Clear input fields
            document.getElementById("nameInput").value = "";
            document.getElementById("emailInput").value = "";
            document.getElementById("numberInput").value = "";
            document.getElementById("addressInput").value = "";
        }
    </script>
</body>
 
</html>

Выход:

Читайте также:  Разделение списка Python на список

обавить редактировать и удалять данные в таблице HT

Как добавить редактировать и удалять данные в таблице HTML с помощью JavaScript

Оцените статью
bestprogrammer.ru
Добавить комментарий