js渲染表格案例

最新推荐文章于 2024-02-02 15:02:51 发布

前端小刘呀

最新推荐文章于 2024-02-02 15:02:51 发布

阅读量153

点赞数

文章标签： javascript css html

本文链接：https://blog.csdn.net/m0_55038051/article/details/129824850

版权

效果：

代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    h5 {
        text-align: center;
    }

    table {
        margin: 0 auto;
        height: 50px;
        text-align: center;
        border-collapse: collapse
    }

    td {
        padding: 10px 50px;
    }

    table,
    tr,
    td {
        border: 1px solid #000;
    }
</style>

<body>

    <table>

    </table>
    <script>
        let name = prompt(`请输入商品名称`)
        let price = prompt(`请输入商品价格`)
        let num = prompt(`请输入商品数量`)
        let place = prompt(`请输入收货地址`)
        document.write(`
            
            <h5>订单确认</h5>
            <table>
                <tr>
                <td>商品名称</td>
                <td>商品价格</td>
                <td>商品数量</td>
                <td>收货地址</td>
            </tr>
            <tr>
                <td>${name}</td>
                <td>${price}</td>
                <td>${num}</td>
                <td>${place}</td>
            </tr>
    </table>
        
            `)
    </script>
</body>

</html>