第一步: 先html +CSS 搭建好表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
text-align: center;
}
table {
/* 合并边框 */
border-collapse: collapse;
margin: 0 auto;
height: 80px;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td{
border: 1px solid black;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<table>
<tr>
<th>商品名称</th>
<th>价格</th>
<th>数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机plus</td>
<td>1999</td>
<td>10</td>
<td>100</td>
<td>花园小区</td>
</tr>
</table>
<script>
</script>
</body>
</html>
第一步: 剪切表格,变量放进去
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
h2 {
text-align: center;
}
table {
/* 合并边框 */
border-collapse: collapse;
margin: 0 auto;
height: 80px;
text-align: center;
}
th {
padding: 5px 30px;
}
table,
th,
td{
border: 1px solid black;
}
</style>
</head>
<body>
<h2>订单确认</h2>
<script>
// 1. 用户输入
let price =Number(prompt('商品价格是: '))
let num =Number(prompt('商品数量: '))
let address = prompt('收获地址: ')
//2. 计算价格
let total = price * num
//3. 页面打印
document.write(`
<table>
<tr>
<th>商品名称</th>
<th>商品价格</th>
<th>数量</th>
<th>总价</th>
<th>收货地址</th>
</tr>
<tr>
<td>小米手机青春版plus</td>
<td>${price}</td>
<td>${num}</td>
<td>${total}</td>
<td>${address}</td>
</tr>
</table>
`)
</script>
</body>
</html>