tab-project
/
弹框输入生成表格.html

<!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>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        table {
            width: 600px;
            height: 600px;
            margin: 100px auto;
            text-align: center;
            background-color: #eee;
        }
    </style>
</head>

<body>

    <script>
        let arrData = ['商品名称', '数量', '价格', '总价格'];
        let shopName = prompt(`请输入${arrData[0]}`);
        let num = +prompt(`请输入${arrData[1]}`);
        let price = +prompt(`请输入${arrData[2]}`);
        let total = num * price;
        document.write(`
        <table border="1" cellspacing="0" cellpadding="0">
        <tr>
            <th>${arrData[0]}</th>
            <th>${arrData[1]}</th>
            <th>${arrData[2]}</th>
            <th>${arrData[3]}</th>
        </tr>
<tr>
    <td>${shopName}</td>
    <td>${num}</td>
    <td>${price}</td>
    <td>${total}</td>
</tr>
    </table>
        `)
    </script>
</body>

</html>