代码如下:
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title></title>
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
}
ul li {
width: 450px;
height: 90px;
font-size: 0;
}
ul li span {
display: inline-block;
width: 88px;
height: 88px;
font-size: 16px;
background-color: #ccc;
border: 1px solid #fff;
}
ul li [class^="icon"] {
background-image: url(./images/zuowei.png);
background-repeat: no-repeat;
}
.icon-1 {
background-position: 0 0;
}
.icon-2 {
background-position: 0 -90px;
}
.icon-3 {
background-position: 0 -180px;
}
</style>
</head>
<body>
<script>
// 添加自定义类名/属性做判断
// 座位的数据(二维数组) 4行5列
var data = [
[1, 1, 1, 1, 1],
[1, 3, 3, 3, 1],
[1, 3, 3, 3, 1],
[1, 1, 2, 2, 1]
]
// 要求:
// 数字1,表示空的座位
// 数字2,表示预定的额座位
// 数字3,表示已售空的座位
// 定义字符串
var html = "<ul>";
// 外循环
for (var i = 0; i < data.length; i++) {
// 拼接字符串li标签
html += "<li>";
// 内循环
for (var j = 0; j < data[i].length; j++) {
// 拼接span标签 data[i][j] 表示取出嵌套数组的 "数字"
html += "<span class='icon-" + data[i][j] + "'></span>";
}
//li结束标签
html += "</li>";
}
// ul结束标签
html += "</ul>";
// 渲染字符串
document.write(html);
</script>
</body>
</html>
PS:仅供练习逻辑。