显示选定单元格的数量

Question

I have the following code to turn cells clicked on to green but I'm trying to have on top of the web page a paragraph with ' number of selected green cells: ' with the number of selected green cells.我有以下代码可以将单击的单元格变为绿色，但我试图在网页顶部放置一个带有“所选绿色单元格数量： ”以及所选绿色单元格数量的段落。 I can't figure it out.我想不通。 I'd also need to record in a file on the website (../coordinates.txt) the x,y coordonate of all selected green cells after clicking on the "confirm" button.单击“确认”按钮后，我还需要在网站 (../coordinates.txt) 上的文件中记录所有选定绿色单元格的 x,y 坐标。 Any help would be greatly appreciated :-)任何帮助将不胜感激：-）

CSS 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 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>

Answer 1

You can do:你可以做：

 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>

显示选定单元格的数量

问题描述

1 个解决方案

解决方案1
1 已采纳 2019-02-25 11:19:08

显示选定单元格的数量

问题描述

1 个解决方案

解决方案1 1 已采纳 2019-02-25 11:19:08

解决方案1
1 已采纳 2019-02-25 11:19:08