js商品动态表格怎么做

在JavaScript中制作动态商品表格的方法有多种，常见的方法包括：使用HTML、CSS与JavaScript相结合、运用框架如React、Vue等、借助第三方库如DataTables等。在本文中，我们将重点介绍如何使用原生JavaScript结合HTML和CSS来创建一个动态商品表格，并探讨各种实现细节。

一、设置HTML结构

首先，我们需要一个基础的HTML结构来展示我们的商品表格。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商品动态表格</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app">
        <h1>商品动态表格</h1>
        <button id="addProductBtn">添加商品</button>
        <table id="productTable">
            <thead>
                <tr>
                    <th>商品名称</th>
                    <th>价格</th>
                    <th>数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <!-- 动态生成的商品行将插入这里 -->
            </tbody>
        </table>
    </div>
    <script src="script.js"></script>
</body>
</html>

二、编写CSS样式

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

body {
    font-family: Arial, sans-serif;
    padding: 20px;
}
#app {
    max-width: 800px;
    margin: 0 auto;
}
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
th, td {
    padding: 10px;
    border: 1px solid #ddd;
    text-align: center;
}
button {
    padding: 10px 20px;
    margin-top: 20px;
    cursor: pointer;
}

三、编写JavaScript代码

接下来，我们将编写JavaScript代码来实现动态添加、删除和编辑商品的功能。

document.addEventListener('DOMContentLoaded', () => {
    const addProductBtn = document.getElementById('addProductBtn');
    const productTableBody = document.querySelector('#productTable tbody');
    // 预定义一些商品数据
    const products = [
        { name: '商品1', price: 100, quantity: 1 },
        { name: '商品2', price: 200, quantity: 2 },
    ];
    // 渲染商品表格
    function renderTable() {
        productTableBody.innerHTML = '';
        products.forEach((product, index) => {
            const row = document.createElement('tr');
            row.innerHTML = `
                <td>${product.name}</td>
                <td>${product.price}</td>
                <td>${product.quantity}</td>
                <td>
                    <button class="editBtn" data-index="${index}">编辑</button>
                    <button class="deleteBtn" data-index="${index}">删除</button>
                </td>
            `;
            productTableBody.appendChild(row);
        });
    }
    // 添加商品
    addProductBtn.addEventListener('click', () => {
        const name = prompt('请输入商品名称');
        const price = prompt('请输入商品价格');
        const quantity = prompt('请输入商品数量');
        if (name && price && quantity) {
            products.push({ name, price: parseFloat(price), quantity: parseInt(quantity, 10) });
            renderTable();
        }
    });
    // 编辑和删除商品
    productTableBody.addEventListener('click', (event) => {
        const target = event.target;
        const index = target.dataset.index;
        if (target.classList.contains('editBtn')) {
            const name = prompt('编辑商品名称', products[index].name);
            const price = prompt('编辑商品价格', products[index].price);
            const quantity = prompt('编辑商品数量', products[index].quantity);
            if (name && price && quantity) {
                products[index] = { name, price: parseFloat(price), quantity: parseInt(quantity, 10) };
                renderTable();
            }
        } else if (target.classList.contains('deleteBtn')) {
            products.splice(index, 1);
            renderTable();
        }
    });
    // 初次渲染表格
    renderTable();
});

四、扩展功能

1、数据验证

在添加和编辑商品时，可以添加数据验证以确保输入的数据是有效的。

function isValidInput(name, price, quantity) {
    return name.trim() !== '' && !isNaN(price) && !isNaN(quantity) && parseFloat(price) > 0 && parseInt(quantity, 10) > 0;
}

在添加和编辑商品时调用这个函数：

if (isValidInput(name, price, quantity)) {
    products.push({ name, price: parseFloat(price), quantity: parseInt(quantity, 10) });
    renderTable();
} else {
    alert('请输入有效的商品信息');
}

2、保存数据

可以将商品数据保存在浏览器的localStorage中，以便在刷新页面后仍然保留数据。

function saveProducts() {
    localStorage.setItem('products', JSON.stringify(products));
}
function loadProducts() {
    const storedProducts = localStorage.getItem('products');
    if (storedProducts) {
        products.push(...JSON.parse(storedProducts));
    }
}
loadProducts();
renderTable();
addProductBtn.addEventListener('click', () => {
    // 添加商品逻辑
    saveProducts();
});
productTableBody.addEventListener('click', (event) => {
    // 编辑和删除商品逻辑
    saveProducts();
});

五、总结

本文介绍了如何使用原生JavaScript创建一个动态商品表格。我们从HTML结构开始，添加了必要的CSS样式，并编写了JavaScript代码来实现添加、编辑和删除商品的功能。通过这种方式，你可以更好地理解JavaScript在动态网页中的应用。

如果你的项目需要更强大的功能和团队协作，可以考虑使用研发项目管理系统PingCode和通用项目协作软件Worktile，这些工具可以帮助你更高效地管理和协作开发项目。