<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>BMI</title>
<style>
table {
700px; border-collapse: collapse;margin:50px auto;
}
td {
border:1px solid #ccc;height:60px; 14.2%;
}
.invalid {
background-color: #999;
}
</style>
</head>
<body>
<table>
<tr>
<td class="invalid"></td>
<td class="invalid"></td>
<td id="1">11.1</td>
<td id="2"></td>
<td id="3"></td>
<td id="4"></td>
<td id="5"></td>
</tr>
<tr>
<td id="6"></td>
<td id="7"></td>
<td id="8"></td>
<td id="9"></td>
<td id="10"></td>
<td id="11"></td>
<td id="12"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td>11.30</td>
<td class="invalid"></td>
<td class="invalid"></td>
<td class="invalid"></td>
</tr>
</table>
</body>
<script>
// 获取所有的单元格
// 这时通过tagname找到的是一个 td 组成数组，所以想要给每一个td加上事件的话，需要遍历
var td = document.getElementsByTagName("td");
// 遍历数组，为每一个td加上点击事件
for (var i = 0; i < td.length; i++) {
// console.log("第"+i+"个td");
td[i].onclick = function (){
// alert("第"+this.id+"个td");
var id = Number(this.id);
switch (true) {
case id <= 5:
alert("HTML");
break;
case id > 5 && id <= 12:
alert("CSS");
break;
case id > 12 && id <= 19:
alert("JS");
break;
case id > 19 && id <= 26:
alert("PS");
break;
default:
alert("....");
break;
}
}
}
</script>
</html>