gg1
/
main.html


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>订单展示</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }
    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
    }
    th {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
    <h1>订单展示</h1>
    <table id="order-list">
        <tr>
            <th>订单号</th>
            <th>商品名称</th>
            <th>数量</th>
            <th>单价</th>
            <th>总价</th>
        </tr>
    </table>
<script>
$(document).ready(function() {
    var orders = [
        {id: 1, name: '商品A', quantity: 2, price: 100},
        {id: 2, name: '商品B', quantity: 1, price: 200},
        {id: 3, name: '商品C', quantity: 3, price: 50}
    ];

    function renderOrderList() {
        // var orderListHtml = '<tr><th>订单号</th><th>商品名称</th><th>数量</th><th>单价</th><th>总价</th></tr>';
        // for (var i = 0; i < orders.length; i++) {
        //     orderListHtml += '<tr><td>' + orders[i].id + '</td><td>' + orders[i].name + '</td><td>' + orders[i].quantity + '</td><td>' + orders[i].price + '</td><td>' + orders[i].quantity * orders[i].price + '</td></tr>';
        // }
        // $('#order-list').html(orderListHtml);

        var i=0;
        var orderListHtml = '<tr><th>订单号</th><th>商品名称</th><th>数量</th><th>单价</th><th>总价</th></tr>';
        $('#order-list').html(orderListHtml);
        do {
            orderListHtml += '<tr><td>' + orders[i].id + '</td><td>' + orders[i].name + '</td><td>' + orders[i].quantity + '</td><td>' + orders[i].price + '</td><td>' + orders[i].quantity * orders[i].price + '</td></tr>';
            $('#order-list').html(orderListHtml);
            i++;
        } while (i<orders.length){

        }

    }

    renderOrderList();
})
</script>