1. PingCode智库首页
  2. 百科

js表格怎么制作

Edit2 • • 百科

js表格怎么制作

制作JS表格的步骤包括：理解基础HTML、掌握CSS样式、使用JavaScript操作DOM、结合事件处理。 在本文中，我们将详细探讨如何通过JavaScript制作一个动态且功能齐全的表格，具体包括如何创建表格、插入数据、样式设计以及实现交互功能。

一、基础HTML与CSS

1、HTML结构

HTML是网页的基础，任何表格都需要一个基本的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>


    <div id="table-container">


        <table id="data-table">


            <thead>


                <tr>


                    <th>ID</th>


                    <th>Name</th>


                    <th>Age</th>


                    <th>Actions</th>


                </tr>


            </thead>


            <tbody>


                <!-- Data Rows will be inserted here dynamically -->


            </tbody>


        </table>


    </div>


    <script src="script.js"></script>


</body>


</html>

2、CSS样式

通过CSS，我们可以美化表格，使其更具可读性和视觉吸引力。以下是一个简单的CSS样式示例：

body {


    font-family: Arial, sans-serif;


    margin: 20px;


}


#table-container {


    width: 80%;


    margin: 0 auto;


}


table {


    width: 100%;


    border-collapse: collapse;


}


th, td {


    border: 1px solid #ddd;


    padding: 8px;


    text-align: left;


}


th {


    background-color: #f2f2f2;


}


tr:nth-child(even) {


    background-color: #f9f9f9;


}


tr:hover {


    background-color: #ddd;


}

二、使用JavaScript操作DOM

1、创建表格行

要在表格中插入数据，我们需要使用JavaScript操作DOM。下面是如何创建和插入表格行的示例：

document.addEventListener("DOMContentLoaded", function() {


    const tableBody = document.querySelector("#data-table tbody");


    const data = [


        { id: 1, name: "John Doe", age: 28 },


        { id: 2, name: "Jane Smith", age: 34 },


        { id: 3, name: "Sam Johnson", age: 22 }


    ];


    data.forEach(item => {


        const row = document.createElement("tr");


        const cellId = document.createElement("td");


        cellId.textContent = item.id;


        row.appendChild(cellId);


        const cellName = document.createElement("td");


        cellName.textContent = item.name;


        row.appendChild(cellName);


        const cellAge = document.createElement("td");


        cellAge.textContent = item.age;


        row.appendChild(cellAge);


        const cellActions = document.createElement("td");


        const deleteButton = document.createElement("button");


        deleteButton.textContent = "Delete";


        deleteButton.addEventListener("click", () => {


            row.remove();


        });


        cellActions.appendChild(deleteButton);


        row.appendChild(cellActions);


        tableBody.appendChild(row);


    });


});

2、插入新数据

为了让表格更具互动性，我们可以添加一个表单，用户可以通过表单向表格中插入新数据：

<form id="data-form">


    <input type="text" id="name" placeholder="Name" required>


    <input type="number" id="age" placeholder="Age" required>


    <button type="submit">Add</button>


</form>



document.addEventListener("DOMContentLoaded", function() {


    const form = document.querySelector("#data-form");


    const tableBody = document.querySelector("#data-table tbody");


    form.addEventListener("submit", function(event) {


        event.preventDefault();


        const name = document.querySelector("#name").value;


        const age = document.querySelector("#age").value;


        const row = document.createElement("tr");


        const cellId = document.createElement("td");


        cellId.textContent = tableBody.rows.length + 1;


        row.appendChild(cellId);


        const cellName = document.createElement("td");


        cellName.textContent = name;


        row.appendChild(cellName);


        const cellAge = document.createElement("td");


        cellAge.textContent = age;


        row.appendChild(cellAge);


        const cellActions = document.createElement("td");


        const deleteButton = document.createElement("button");


        deleteButton.textContent = "Delete";


        deleteButton.addEventListener("click", () => {


            row.remove();


        });


        cellActions.appendChild(deleteButton);


        row.appendChild(cellActions);


        tableBody.appendChild(row);


        form.reset();


    });


});

三、事件处理和交互功能

1、删除行功能

在上面的代码中，我们已经实现了删除行的功能。每一行都有一个“Delete”按钮，点击按钮时，该行会被删除。

2、编辑行功能

为了更进一步，我们可以添加编辑功能。用户可以点击“Edit”按钮，修改行数据，然后保存更改。

document.addEventListener("DOMContentLoaded", function() {


    const tableBody = document.querySelector("#data-table tbody");


    const data = [


        { id: 1, name: "John Doe", age: 28 },


        { id: 2, name: "Jane Smith", age: 34 },


        { id: 3, name: "Sam Johnson", age: 22 }


    ];


    data.forEach(item => {


        const row = document.createElement("tr");


        const cellId = document.createElement("td");


        cellId.textContent = item.id;


        row.appendChild(cellId);


        const cellName = document.createElement("td");


        cellName.textContent = item.name;


        row.appendChild(cellName);


        const cellAge = document.createElement("td");


        cellAge.textContent = item.age;


        row.appendChild(cellAge);


        const cellActions = document.createElement("td");


        const editButton = document.createElement("button");


        editButton.textContent = "Edit";


        editButton.addEventListener("click", () => {


            const newName = prompt("Enter new name:", item.name);


            const newAge = prompt("Enter new age:", item.age);


            if (newName && newAge) {


                item.name = newName;


                item.age = newAge;


                cellName.textContent = newName;


                cellAge.textContent = newAge;


            }


        });


        cellActions.appendChild(editButton);


        const deleteButton = document.createElement("button");


        deleteButton.textContent = "Delete";


        deleteButton.addEventListener("click", () => {


            row.remove();


        });


        cellActions.appendChild(deleteButton);


        row.appendChild(cellActions);


        tableBody.appendChild(row);


    });


});

四、使用外部库和框架

1、jQuery

使用jQuery可以更简洁地操作DOM。以下是用jQuery实现动态表格的示例：

<!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">


    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>


</head>


<body>


    <div id="table-container">


        <table id="data-table">


            <thead>


                <tr>


                    <th>ID</th>


                    <th>Name</th>


                    <th>Age</th>


                    <th>Actions</th>


                </tr>


            </thead>


            <tbody>


                <!-- Data Rows will be inserted here dynamically -->


            </tbody>


        </table>


    </div>


    <form id="data-form">


        <input type="text" id="name" placeholder="Name" required>


        <input type="number" id="age" placeholder="Age" required>


        <button type="submit">Add</button>


    </form>


    <script src="script.js"></script>


</body>


</html>



$(document).ready(function() {


    const tableBody = $("#data-table tbody");


    const data = [


        { id: 1, name: "John Doe", age: 28 },


        { id: 2, name: "Jane Smith", age: 34 },


        { id: 3, name: "Sam Johnson", age: 22 }


    ];


    data.forEach(item => {


        const row = $("<tr></tr>");


        row.append($("<td></td>").text(item.id));


        row.append($("<td></td>").text(item.name));


        row.append($("<td></td>").text(item.age));


        const actionsCell = $("<td></td>");


        const deleteButton = $("<button></button>").text("Delete");


        deleteButton.on("click", function() {


            row.remove();


        });


        actionsCell.append(deleteButton);


        row.append(actionsCell);


        tableBody.append(row);


    });


    $("#data-form").on("submit", function(event) {


        event.preventDefault();


        const name = $("#name").val();


        const age = $("#age").val();


        const newRow = $("<tr></tr>");


        newRow.append($("<td></td>").text(tableBody.children().length + 1));


        newRow.append($("<td></td>").text(name));


        newRow.append($("<td></td>").text(age));


        const actionsCell = $("<td></td>");


        const deleteButton = $("<button></button>").text("Delete");


        deleteButton.on("click", function() {


            newRow.remove();


        });


        actionsCell.append(deleteButton);


        newRow.append(actionsCell);


        tableBody.append(newRow);


        $("#data-form")[0].reset();


    });


});

2、React

使用React可以更好地管理组件状态和生命周期。以下是用React实现动态表格的示例：

import React, { useState } from 'react';


import ReactDOM from 'react-dom';


import './styles.css';


function App() {


    const [data, setData] = useState([


        { id: 1, name: "John Doe", age: 28 },


        { id: 2, name: "Jane Smith", age: 34 },


        { id: 3, name: "Sam Johnson", age: 22 }


    ]);


    const [name, setName] = useState('');


    const [age, setAge] = useState('');


    const addRow = (e) => {


        e.preventDefault();


        const newData = [...data, { id: data.length + 1, name, age }];


        setData(newData);


        setName('');


        setAge('');


    };


    const deleteRow = (id) => {


        const newData = data.filter(item => item.id !== id);


        setData(newData);


    };


    return (


        <div id="table-container">


            <table id="data-table">


                <thead>


                    <tr>


                        <th>ID</th>


                        <th>Name</th>


                        <th>Age</th>


                        <th>Actions</th>


                    </tr>


                </thead>


                <tbody>


                    {data.map(item => (


                        <tr key={item.id}>


                            <td>{item.id}</td>


                            <td>{item.name}</td>


                            <td>{item.age}</td>


                            <td>


                                <button onClick={() => deleteRow(item.id)}>Delete</button>


                            </td>


                        </tr>


                    ))}


                </tbody>


            </table>


            <form id="data-form" onSubmit={addRow}>


                <input type="text" value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" required />


                <input type="number" value={age} onChange={(e) => setAge(e.target.value)} placeholder="Age" required />


                <button type="submit">Add</button>


            </form>


        </div>


    );


}


ReactDOM.render(<App />, document.getElementById('root'));

五、数据持久化和服务器交互

1、LocalStorage

为了在页面刷新后保持数据，我们可以使用LocalStorage：

document.addEventListener("DOMContentLoaded", function() {


    const tableBody = document.querySelector("#data-table tbody");


    const form = document.querySelector("#data-form");


    const loadData = () => {


        const data = JSON.parse(localStorage.getItem("tableData")) || [];


        data.forEach(item => {


            const row = document.createElement("tr");


            row.appendChild(document.createElement("td")).textContent = item.id;


            row.appendChild(document.createElement("td")).textContent = item.name;


            row.appendChild(document.createElement("td")).textContent = item.age;


            const cellActions = document.createElement("td");


            const deleteButton = document.createElement("button");


            deleteButton.textContent = "Delete";


            deleteButton.addEventListener("click", () => {


                row.remove();


                saveData();


            });


            cellActions.appendChild(deleteButton);


            row.appendChild(cellActions);


            tableBody.appendChild(row);


        });


    };


    const saveData = () => {


        const data = Array.from(tableBody.children).map(row => ({


            id: row.cells[0].textContent,


            name: row.cells[1].textContent,


            age: row.cells[2].textContent


        }));


        localStorage.setItem("tableData", JSON.stringify(data));


    };


    form.addEventListener("submit", function(event) {


        event.preventDefault();


        const name = form.querySelector("#name").value;


        const age = form.querySelector("#age").value;


        const row = document.createElement("tr");


        row.appendChild(document.createElement("td")).textContent = tableBody.rows.length + 1;


        row.appendChild(document.createElement("td")).textContent = name;


        row.appendChild(document.createElement("td")).textContent = age;


        const cellActions = document.createElement("td");


        const deleteButton = document.createElement("button");


        deleteButton.textContent = "Delete";


        deleteButton.addEventListener("click", () => {


            row.remove();


            saveData();


        });


        cellActions.appendChild(deleteButton);


        row.appendChild(cellActions);


        tableBody.appendChild(row);


        saveData();


        form.reset();


    });


    loadData();


});

2、与服务器交互

为了实现数据的持久化，我们还可以将数据存储在服务器端。以下是一个通过Fetch API与服务器交互的示例：

document.addEventListener("DOMContentLoaded", function() {


    const tableBody = document.querySelector("#data-table tbody");


    const form = document.querySelector("#data-form");


    const loadData = async () => {


        try {


            const response = await fetch('/api/data');


            const data = await response.json();


            data.forEach(item => {


                const row = document.createElement("tr");


                row.appendChild(document.createElement("td")).textContent = item.id;


                row.appendChild(document.createElement("td")).textContent = item.name;


                row.appendChild(document.createElement("td")).textContent = item.age;


                const cellActions = document.createElement("td");


                const deleteButton = document.createElement("button");


                deleteButton.textContent = "Delete";


                deleteButton.addEventListener("click", async () => {


                    await fetch(`/api/data/${item.id}`, { method: 'DELETE' });


                    row.remove();


                });


                cellActions.appendChild(deleteButton);


                row.appendChild(cellActions);


                tableBody.appendChild(row);


            });


        } catch (error) {


            console.error("Failed to load data:", error);


        }


    };


    const saveData = async (data) => {


        try {


            await fetch('/api/data', {


                method: 'POST',


                headers: { 'Content-Type': 'application/json' },


                body: JSON.stringify(data)


            });


        } catch (error) {


            console.error("Failed to save data:", error);


        }


    };


    form.addEventListener("submit", async function(event) {


        event.preventDefault();


        const name = form.querySelector("#name").value;


        const age = form.querySelector("#age").value;


        const id = tableBody.rows.length + 1;


        const data = { id, name, age };


        await saveData(data);


        const row = document.createElement("tr");


        row.appendChild(document.createElement("td")).textContent = id;


        row.appendChild(document.createElement("td")).textContent = name;


        row.appendChild(document.createElement("td")).textContent = age;


        const cellActions = document.createElement("td");


        const deleteButton = document.createElement("button");


        deleteButton.textContent = "Delete";


        deleteButton.addEventListener("click", async () => {


            await fetch(`/api/data/${id}`, { method: 'DELETE' });


            row.remove();


        });


        cellActions.appendChild(deleteButton);


        row.appendChild(cellActions);


        tableBody.appendChild(row);


        form.reset();


    });


    loadData();


});

六、推荐系统

在项目团队管理中，使用合适的管理系统能够极大提升效率。以下是两个推荐的系统：

  1. 研发项目管理系统PingCode：PingCode是一款专为研发团队设计的项目管理系统，提供了从需求、任务、缺陷到代码管理的一站式解决方案，帮助团队更好地协作和管理项目进度。

  2. 通用项目协作软件Worktile：Worktile是一款功能强大的项目协作工具，适用于各种类型的团队。它提供了任务管理、日程安排、文件共享等多种功能，能够帮助团队更高效地完成工作。

总结

通过以上步骤，我们已经全面了解了如何使用JavaScript制作一个动态表格。无论

相关问答FAQs：

1. 如何使用JavaScript制作一个动态的表格？

  • 使用JavaScript的createElement函数创建一个table元素。
  • 使用JavaScript的appendChild函数将table元素添加到页面上的某个容器中。
  • 使用JavaScript的createElement函数创建tr和td元素，并使用appendChild函数将它们添加到table元素中，以创建表格的行和列。
  • 使用JavaScript的setAttribute函数设置表格的样式、内容和其他属性。

2. 如何使用JavaScript为表格添加排序功能？

  • 首先，为表格的表头添加点击事件监听器。
  • 在事件处理函数中，使用JavaScript的sort方法对表格的数据进行排序。
  • 使用JavaScript的createElement函数创建新的排好序的表格。
  • 将排好序的数据填充到新的表格中，并使用appendChild函数将它们添加到页面上的容器中。

3. 如何使用JavaScript实现表格的筛选功能？

  • 首先，获取用户输入的筛选条件。
  • 使用JavaScript的filter方法对表格的数据进行筛选。
  • 使用JavaScript的createElement函数创建新的筛选后的表格。
  • 将筛选后的数据填充到新的表格中，并使用appendChild函数将它们添加到页面上的容器中。

4. 如何使用JavaScript实现表格的分页功能？

  • 首先，确定每页显示的数据数量和总页数。
  • 使用JavaScript的slice方法将数据按照当前页数进行切割。
  • 使用JavaScript的createElement函数创建新的分页后的表格。
  • 将分页后的数据填充到新的表格中，并使用appendChild函数将它们添加到页面上的容器中。
  • 添加上一页和下一页的点击事件监听器，以实现切换页面的功能。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3889105

赞 (0)
Edit2Edit2
免费注册
电话联系

4008001024

微信咨询
微信咨询
返回顶部