我有以下代码可以将单击的单元格变为绿色，但我试图在网页顶部添加一个段落，其中包含“所选绿色单元格的数量:”以及选定的绿色细胞。我想不通。单击“确认”按钮后，我还需要在网站 (../coordinates.txt) 上的文件中记录所有选定绿色单元格的 x、y 坐标。 任何帮助将不胜感激:-)
CSS
.green { background: green; color: white; }
.white { background: white; color: black; }
#cells-list { border: 1px solid black; }
td { padding: 10px; border: 1px solid black; }
HTML
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 3</title>
<link rel="stylesheet" type="text/css" href="Untitled_1.css"/>
</head>
<body>
<form id="form1" runat="server">
<asp:Button id="Button1" runat="server" Text="Confirm" />
</form>
<table id="cells-list">
<tr>
<td class="white">TEST1</td>
<td class="white">TEST2</td>
<td class="white">TEST3</td>
</tr>
</table>
<script type="text/javascript">
var cells = document.querySelectorAll("td");
for (var i = 0; i < cells.length; i++) {
cells[i].addEventListener("click", function() {
this.className= this.className == "white" ? "green" : "white";
});
}
</script>
</body>
</html>
最佳答案
你可以这样做:
var numberOfSelectedCellsElem = document.querySelector('#numberOfSelectedCells');
document.querySelectorAll('td').forEach(c => {
c.addEventListener('click', function() {
this.className = this.className == 'white' ? 'green' : 'white';
numberOfSelectedCellsElem.innerHTML = document.querySelectorAll('.green').length;
});
});.green {
background: green;
color: white;
}
.white {
background: white;
color: black;
}
#cells-list {
border: 1px solid black;
}
td {
cursor: pointer;
padding: 10px;
border: 1px solid black;
}<p>number of selected green cells: <span id="numberOfSelectedCells">0</span></p>
<form id="form1" runat="server">
<asp:Button id="Button1" runat="server" Text="Confirm" />
</form>
<table id="cells-list">
<tr>
<td class="white">TEST1</td>
<td class="white">TEST2</td>
<td class="white">TEST3</td>
</tr>
</table>关于javascript - 显示所选单元格的数量，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54864915/