jsp实现显示 9 个格子。 2、使用 getBuf 方法,检查每个格子的序号是否选择完毕,如果选择完毕则 NG,如果未选择则绘制各个序
时间: 2024-05-15 12:16:28 浏览: 135
Windows Sockets网络编程 总计4个包,part2
号对应的格子。
1. JSP页面代码:
```
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>显示9个格子</title>
<style>
table {
border-collapse: collapse;
}
td {
border: 1px solid black;
width: 50px;
height: 50px;
text-align: center;
vertical-align: middle;
font-size: 24px;
font-weight: bold;
}
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<table>
<tr>
<td id="cell1" onclick="selectCell(1)">1</td>
<td id="cell2" onclick="selectCell(2)">2</td>
<td id="cell3" onclick="selectCell(3)">3</td>
</tr>
<tr>
<td id="cell4" onclick="selectCell(4)">4</td>
<td id="cell5" onclick="selectCell(5)">5</td>
<td id="cell6" onclick="selectCell(6)">6</td>
</tr>
<tr>
<td id="cell7" onclick="selectCell(7)">7</td>
<td id="cell8" onclick="selectCell(8)">8</td>
<td id="cell9" onclick="selectCell(9)">9</td>
</tr>
</table>
<script>
var selectedCells = [];
function selectCell(cellNum) {
var cell = document.getElementById("cell" + cellNum);
if (cell.classList.contains("selected")) {
cell.classList.remove("selected");
var index = selectedCells.indexOf(cellNum);
if (index > -1) {
selectedCells.splice(index, 1);
}
} else {
cell.classList.add("selected");
selectedCells.push(cellNum);
}
}
function getBuf() {
var buf = "";
for (var i = 1; i <= 9; i++) {
var cell = document.getElementById("cell" + i);
if (cell.classList.contains("selected")) {
buf += i + " is selected\n";
} else {
buf += i + " is not selected\n";
}
}
alert(buf);
}
</script>
<button onclick="getBuf()">检查选择状态</button>
</body>
</html>
```
2. 实现思路:
- 在页面中创建一个3x3的表格,每个单元格都有一个唯一的id,用于后面的操作。
- 点击某个单元格时,将其添加到已选单元格的数组中,并添加一个CSS类名,用于显示已选状态。再次点击已选单元格则取消选择,从已选单元格的数组中删除,并移除CSS类名。
- 点击检查选择状态按钮时,遍历每个单元格,判断是否被选择,如果被选择则在字符串缓冲区中记录其状态,否则记录未选择状态。最后弹出提示框显示所有单元格的状态。
阅读全文