编辑表格输入内容、根据input输入框输入数字动态生成表格行数、编辑表格内容提交传给后台数据处理

前端

2023-12-24 00:26:00

如何动态管理表格数据：输入、生成和提交

在现代网络应用程序中，动态管理表格数据至关重要。本文将深入探讨如何在表格中实现输入内容编辑、基于用户输入动态生成表格行以及将编辑后的数据提交给后台处理。

1. 编辑表格输入内容

为了允许用户轻松编辑表格单元格，我们需要添加适当的输入控件。input、textarea 和 select 等控件是实现此目的的有效选择。每个控件与特定的数据类型相关联，例如文本、数字或选项。

2. 根据输入生成表格行

有时候，根据用户提供的输入动态生成表格行非常有用。例如，用户可能会输入所需行数，然后应用程序相应地创建行。这可以通过 JavaScript 函数来实现，该函数根据给定的行数生成并插入表格行。

示例代码：

function generateRows(rowCount) {
  const table = document.querySelector('table');
  const tbody = table.querySelector('tbody');

  for (let i = 0; i < rowCount; i++) {
    const tr = document.createElement('tr');
    const td1 = document.createElement('td');
    const td2 = document.createElement('td');
    const td3 = document.createElement('td');

    const input = document.createElement('input');
    input.setAttribute('type', 'text');
    input.setAttribute('name', 'name');

    const numberInput = document.createElement('input');
    numberInput.setAttribute('type', 'number');
    numberInput.setAttribute('name', 'age');

    const select = document.createElement('select');
    select.setAttribute('name', 'gender');
    const option1 = document.createElement('option');
    option1.setAttribute('value', 'male');
    option1.innerText = 'Male';
    const option2 = document.createElement('option');
    option2.setAttribute('value', 'female');
    option2.innerText = 'Female';

    td1.appendChild(input);
    td2.appendChild(numberInput);
    td3.appendChild(select);
    select.appendChild(option1);
    select.appendChild(option2);

    tr.appendChild(td1);
    tr.appendChild(td2);
    tr.appendChild(td3);

    tbody.appendChild(tr);
  }
}

3. 提交表格内容

编辑完表格数据后，下一步是将其提交到后端服务器进行处理。这可以通过使用 JavaScript 的 fetch() 方法来实现。fetch() 方法允许您发送 HTTP 请求并接收服务器的响应。

示例代码：

const form = document.getElementById('form');

form.addEventListener('submit', (event) => {
  event.preventDefault();

  const formData = new FormData(form);

  fetch('submit.php', {
    method: 'POST',
    body: formData,
  })
  .then(response => response.text())
  .then(data => alert(data))
  .catch(error => console.error(error));
});