代码如下：
<!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：仅供练习逻辑。
