js 表格 代码怎么写

实现动态JS表格的方法

要在网页上实现一个动态表格，你可以使用HTML、CSS和JavaScript。通过JavaScript，你可以动态地创建、操作和删除表格元素，这对于处理动态数据尤其有用。以下是一个简单的示例，展示了如何创建一个动态表格，并通过JavaScript添加行和数据。

一、HTML部分

首先，我们需要一个基本的HTML结构来容纳我们的表格和一些按钮，用来添加和删除行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Dynamic Table Example</h1>
    <table id="myTable">
        <thead>
            <tr>
                <th>Name</th>
                <th>Age</th>
                <th>Action</th>
            </tr>
        </thead>
        <tbody>
            <!-- Table rows will be added here dynamically -->
        </tbody>
    </table>
    <button id="addRowBtn">Add Row</button>
    <script src="script.js"></script>
</body>
</html>

二、CSS部分

为了使表格看起来更美观，我们可以添加一些基本的CSS样式。

/* styles.css */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}
table, th, td {
    border: 1px solid black;
}
th, td {
    padding: 10px;
    text-align: left;
}
button {
    padding: 10px 20px;
    font-size: 16px;
}

三、JavaScript部分

现在，我们来编写JavaScript代码来实现动态添加和删除表格行的功能。

// script.js
document.addEventListener('DOMContentLoaded', function() {
    const table = document.getElementById('myTable').getElementsByTagName('tbody')[0];
    const addRowBtn = document.getElementById('addRowBtn');
    addRowBtn.addEventListener('click', function() {
        const newRow = table.insertRow();
        const nameCell = newRow.insertCell(0);
        const ageCell = newRow.insertCell(1);
        const actionCell = newRow.insertCell(2);
        nameCell.innerHTML = '<input type="text" placeholder="Enter name">';
        ageCell.innerHTML = '<input type="number" placeholder="Enter age">';
        actionCell.innerHTML = '<button class="deleteRowBtn">Delete</button>';
        // Add delete functionality to the new delete button
        actionCell.querySelector('.deleteRowBtn').addEventListener('click', function() {
            table.deleteRow(newRow.rowIndex - 1);
        });
    });
    // Initial delete button functionality (if needed)
    const initialDeleteButtons = document.querySelectorAll('.deleteRowBtn');
    initialDeleteButtons.forEach(function(button) {
        button.addEventListener('click', function() {
            const row = button.closest('tr');
            table.deleteRow(row.rowIndex - 1);
        });
    });
});

四、实现动态数据更新

通过上述代码，我们已经实现了基本的动态表格功能。接下来，我们可以进一步扩展这个功能，例如从服务器获取数据并动态填充表格，或者将用户输入的数据发送到服务器。

1、从服务器获取数据并填充表格

// Fetch data from server and populate the table
fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
        data.forEach(item => {
            const newRow = table.insertRow();
            const nameCell = newRow.insertCell(0);
            const ageCell = newRow.insertCell(1);
            const actionCell = newRow.insertCell(2);
            nameCell.textContent = item.name;
            ageCell.textContent = item.age;
            actionCell.innerHTML = '<button class="deleteRowBtn">Delete</button>';
            actionCell.querySelector('.deleteRowBtn').addEventListener('click', function() {
                table.deleteRow(newRow.rowIndex - 1);
            });
        });
    });

2、将用户输入的数据发送到服务器

// Example function to send data to the server
function sendDataToServer(data) {
    fetch('https://api.example.com/data', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(result => {
        console.log('Success:', result);
    })
    .catch(error => {
        console.error('Error:', error);
    });
}
// Modify the addRowBtn event listener to send data to the server
addRowBtn.addEventListener('click', function() {
    const newRow = table.insertRow();
    const nameCell = newRow.insertCell(0);
    const ageCell = newRow.insertCell(1);
    const actionCell = newRow.insertCell(2);
    nameCell.innerHTML = '<input type="text" placeholder="Enter name">';
    ageCell.innerHTML = '<input type="number" placeholder="Enter age">';
    actionCell.innerHTML = '<button class="deleteRowBtn">Delete</button>';
    const deleteButton = actionCell.querySelector('.deleteRowBtn');
    deleteButton.addEventListener('click', function() {
        table.deleteRow(newRow.rowIndex - 1);
    });
    // Add event listener to send data to the server
    nameCell.querySelector('input').addEventListener('blur', function() {
        const name = nameCell.querySelector('input').value;
        const age = ageCell.querySelector('input').value;
        if (name && age) {
            sendDataToServer({ name, age });
        }
    });
});

五、总结

通过上述步骤，我们已经实现了一个动态表格，并且能够通过JavaScript动态地添加和删除行，同时还可以从服务器获取数据并填充表格，或者将用户输入的数据发送到服务器。这种动态表格在许多实际应用中非常有用，例如数据管理系统、信息展示平台等。

在团队项目管理中，尤其是研发项目管理中，使用合适的工具能够提高效率。我们推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile，它们能够帮助团队更好地协作和管理项目。

js 表格代码怎么写

一、HTML部分

二、CSS部分

三、JavaScript部分

四、实现动态数据更新

1、从服务器获取数据并填充表格

2、将用户输入的数据发送到服务器

五、总结

相关问答FAQs：

js 表格 代码怎么写

一、HTML部分

二、CSS部分

三、JavaScript部分

四、实现动态数据更新

1、从服务器获取数据并填充表格

2、将用户输入的数据发送到服务器

五、总结

相关问答FAQs：

js 表格代码怎么写