Day5渲染表格案例 

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>渲染表格案例</title>
</head>
<style>
  h2 {
    text-align: center;
  }

  table {
    /* 合并边框 */
    border-collapse: collapse;
    height: 80px;
    margin: 0 auto;
    text-align: center;
  }

  th {
    padding: 5px 30px;
  }

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

<body>
  <h2>订单确认</h2>


  <script>
    // 1.用户输入
    let goodsName = prompt('请输入商品名称:')
    let price = +prompt('请输入商品价格：')
    let num = +prompt('请输入商品数量:')
    let address = prompt('请输入收货地址:')
    // 2.计算商品总额
    let total = num * price
    //  3.页面打印渲染
    document.write(`
    <table>
    <tr>
      <th>商品名称</th>
      <th>商品价格</th>
      <th>商品数量</th>
      <th>总价</th>
      <th>收货地址</th>
    </tr>
    <tr>
      <td>${goodsName}</td>
      <td>${price}</td>
      <td>${num}</td>
      <td>${total}</td>
      <td>${address}</td>
    </tr>
  </table>
    
    `)
  </script>
</body>

</html>

image

posted @ 2026-01-01 09:24  冰涿  阅读(4)  评论(0)    收藏  举报