怎么用JS做订单表

要用JavaScript创建订单表，可以通过以下步骤：利用HTML创建基础结构、用CSS进行样式设计、通过JavaScript实现交互功能、使用AJAX与服务器进行数据交换。以下将详细介绍其中的关键步骤。

一、创建基本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>订单表</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>订单管理系统</h1>
    <form id="orderForm">
        <label for="productName">产品名称:</label>
        <input type="text" id="productName" name="productName" required>
        <label for="quantity">数量:</label>
        <input type="number" id="quantity" name="quantity" required>
        <label for="price">价格:</label>
        <input type="number" id="price" name="price" required>
        <button type="submit">添加订单</button>
    </form>
    <table id="ordersTable">
        <thead>
            <tr>
                <th>产品名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>总价</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <!-- 订单数据将插入到这里 -->
        </tbody>
    </table>
    <script src="script.js"></script>
</body>
</html>

二、添加CSS样式

为了使订单表看起来更美观，我们可以添加一些CSS样式。以下是一个简单的CSS样式示例：

body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
h1 {
    text-align: center;
}
form {
    margin-bottom: 20px;
}
label {
    display: inline-block;
    width: 80px;
}
input {
    margin-bottom: 10px;
}
button {
    display: inline-block;
    margin-top: 10px;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: center;
}
th {
    background-color: #f4f4f4;
}

三、使用JavaScript实现交互功能

为了使订单表具有交互性，我们需要编写JavaScript代码来处理表单提交、数据存储和表格更新。以下是一个示例代码：

document.addEventListener('DOMContentLoaded', () => {
    const orderForm = document.getElementById('orderForm');
    const ordersTable = document.getElementById('ordersTable').getElementsByTagName('tbody')[0];
    orderForm.addEventListener('submit', (event) => {
        event.preventDefault();
        const productName = document.getElementById('productName').value;
        const quantity = parseInt(document.getElementById('quantity').value);
        const price = parseFloat(document.getElementById('price').value);
        const totalPrice = quantity * price;
        const newRow = ordersTable.insertRow();
        const productNameCell = newRow.insertCell(0);
        const quantityCell = newRow.insertCell(1);
        const priceCell = newRow.insertCell(2);
        const totalPriceCell = newRow.insertCell(3);
        const actionsCell = newRow.insertCell(4);
        productNameCell.textContent = productName;
        quantityCell.textContent = quantity;
        priceCell.textContent = price.toFixed(2);
        totalPriceCell.textContent = totalPrice.toFixed(2);
        const deleteButton = document.createElement('button');
        deleteButton.textContent = '删除';
        deleteButton.addEventListener('click', () => {
            ordersTable.deleteRow(newRow.rowIndex - 1);
        });
        actionsCell.appendChild(deleteButton);
        orderForm.reset();
    });
});

四、使用AJAX与服务器进行数据交换

为了使订单数据能够持久化存储并与服务器进行交互，我们可以使用AJAX来发送和接收数据。以下是一个示例代码：

document.addEventListener('DOMContentLoaded', () => {
    const orderForm = document.getElementById('orderForm');
    const ordersTable = document.getElementById('ordersTable').getElementsByTagName('tbody')[0];
    function fetchOrders() {
        fetch('/api/orders')
            .then(response => response.json())
            .then(data => {
                data.forEach(order => {
                    const newRow = ordersTable.insertRow();
                    const productNameCell = newRow.insertCell(0);
                    const quantityCell = newRow.insertCell(1);
                    const priceCell = newRow.insertCell(2);
                    const totalPriceCell = newRow.insertCell(3);
                    const actionsCell = newRow.insertCell(4);
                    productNameCell.textContent = order.productName;
                    quantityCell.textContent = order.quantity;
                    priceCell.textContent = order.price.toFixed(2);
                    totalPriceCell.textContent = (order.quantity * order.price).toFixed(2);
                    const deleteButton = document.createElement('button');
                    deleteButton.textContent = '删除';
                    deleteButton.addEventListener('click', () => {
                        fetch(`/api/orders/${order.id}`, {
                            method: 'DELETE'
                        }).then(() => {
                            ordersTable.deleteRow(newRow.rowIndex - 1);
                        });
                    });
                    actionsCell.appendChild(deleteButton);
                });
            });
    }
    orderForm.addEventListener('submit', (event) => {
        event.preventDefault();
        const productName = document.getElementById('productName').value;
        const quantity = parseInt(document.getElementById('quantity').value);
        const price = parseFloat(document.getElementById('price').value);
        fetch('/api/orders', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ productName, quantity, price })
        }).then(response => response.json())
            .then(order => {
                const newRow = ordersTable.insertRow();
                const productNameCell = newRow.insertCell(0);
                const quantityCell = newRow.insertCell(1);
                const priceCell = newRow.insertCell(2);
                const totalPriceCell = newRow.insertCell(3);
                const actionsCell = newRow.insertCell(4);
                productNameCell.textContent = order.productName;
                quantityCell.textContent = order.quantity;
                priceCell.textContent = order.price.toFixed(2);
                totalPriceCell.textContent = (order.quantity * order.price).toFixed(2);
                const deleteButton = document.createElement('button');
                deleteButton.textContent = '删除';
                deleteButton.addEventListener('click', () => {
                    fetch(`/api/orders/${order.id}`, {
                        method: 'DELETE'
                    }).then(() => {
                        ordersTable.deleteRow(newRow.rowIndex - 1);
                    });
                });
                actionsCell.appendChild(deleteButton);
                orderForm.reset();
            });
    });
    fetchOrders();
});

通过以上步骤，你可以创建一个功能完整的订单表，能够添加、显示和删除订单，并将数据与服务器进行交互。这不仅提高了用户体验，还确保了数据的持久性和安全性。在实际项目中，你可以根据需求进一步扩展和优化这段代码。

怎么用JS做订单表

一、创建基本HTML结构

二、添加CSS样式

三、使用JavaScript实现交互功能

四、使用AJAX与服务器进行数据交换

相关问答FAQs：