怎么用js和表单向表格中输入数据

如何用JS和表单向表格中输入数据

通过JavaScript和表单向表格中输入数据，可以实现动态添加数据、实时更新表格等功能。这一过程主要包括以下步骤：获取表单数据、创建新行并填充数据、将新行添加到表格中。接下来，我们将详细描述这些步骤。

一、获取表单数据

在JavaScript中，获取表单数据通常使用document.getElementById或document.querySelector方法。通过这些方法，我们可以轻松获取用户在表单中输入的数据，并将其存储在变量中，以便后续使用。

function getFormData() {
    let name = document.getElementById("name").value;
    let age = document.getElementById("age").value;
    let email = document.getElementById("email").value;
    return { name, age, email };
}

二、创建新行并填充数据

在获取表单数据后，我们需要创建一个新的表格行（<tr>元素），并在其中添加包含表单数据的单元格（<td>元素）。这一过程可以通过JavaScript的DOM操作方法来实现。

function createTableRow(data) {
    let row = document.createElement("tr");
    let nameCell = document.createElement("td");
    nameCell.textContent = data.name;
    row.appendChild(nameCell);
    let ageCell = document.createElement("td");
    ageCell.textContent = data.age;
    row.appendChild(ageCell);
    let emailCell = document.createElement("td");
    emailCell.textContent = data.email;
    row.appendChild(emailCell);
    return row;
}

三、将新行添加到表格中

最后一步是将创建的新行添加到表格中。这一步可以通过appendChild方法实现。我们需要先获取表格的引用，然后将新行添加到表格的<tbody>部分。

function addToTable(row) {
    let tableBody = document.querySelector("#dataTable tbody");
    tableBody.appendChild(row);
}

四、整合代码

现在，我们将上述步骤整合到一个完整的函数中，以便在表单提交时执行。

document.getElementById("dataForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 防止表单默认提交行为
    let formData = getFormData();
    let newRow = createTableRow(formData);
    addToTable(newRow);
    // 清空表单
    document.getElementById("dataForm").reset();
});

五、示例代码

下面是一个完整的示例代码，展示了如何通过JavaScript和表单向表格中输入数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单添加数据到表格</title>
</head>
<body>
    <form id="dataForm">
        <label for="name">姓名:</label>
        <input type="text" id="name" name="name" required>
        <label for="age">年龄:</label>
        <input type="number" id="age" name="age" required>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email" required>
        <button type="submit">添加</button>
    </form>
    <table id="dataTable" border="1">
        <thead>
            <tr>
                <th>姓名</th>
                <th>年龄</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script>
        document.getElementById("dataForm").addEventListener("submit", function(event) {
            event.preventDefault(); // 防止表单默认提交行为
            let formData = {
                name: document.getElementById("name").value,
                age: document.getElementById("age").value,
                email: document.getElementById("email").value
            };
            let row = document.createElement("tr");
            let nameCell = document.createElement("td");
            nameCell.textContent = formData.name;
            row.appendChild(nameCell);
            let ageCell = document.createElement("td");
            ageCell.textContent = formData.age;
            row.appendChild(ageCell);
            let emailCell = document.createElement("td");
            emailCell.textContent = formData.email;
            row.appendChild(emailCell);
            document.querySelector("#dataTable tbody").appendChild(row);
            // 清空表单
            document.getElementById("dataForm").reset();
        });
    </script>
</body>
</html>

通过以上步骤，您可以实现通过JavaScript和表单向表格中输入数据的功能。这种方法不仅简单易行，而且可以帮助您轻松实现动态数据更新和管理。如果您有更多的需求，如数据验证、排序等，也可以在此基础上进行扩展和优化。