这是我的简单代码，我希望当用户单击第一个单元格时，它将变成蓝色背景（仅单击的单元格）。我认为唯一的问题是我不知道如何选择/引用特定单元格，因为它是一个嵌套元素。
**如果您可以通过“按标签名称”进行操作，那就太好了。
感谢您的帮助！
HTML代码：
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>Aviliable</td>
<td>Aviliable</td>
<td>Aviliable</td>
</tr>
<tr>
<td>Aviliable</td>
<td>Aviliable</td>
<td>Aviliable</td>
</tr>
<tr>
<td>Aviliable</td>
<td>Aviliable</td>
<td>Aviliable</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>
CSS：
td {
border: 5px solid black;
width: 200px;
height: 200px;
}
.blue {
background-color: blue;
}
JS：
var td = document.getElementsByTagName("tr")[0].document.getElementByTagName("td")[0];
td.onclick = function () {
td += "blue";
}
使用event.target选择要添加样式的单元格，
var firstTableRow = document.getElementsByTagName("tr")[0];
firstTableRow.addEventListener('click', function(event){
event.target.classList.add('blue');
})
``
var td = document.getElementsByTagName("tr")[0].getElementsByTagName("td")[0]
td.onclick = function () {
td.style.backgroundColor = "blue";
}td {
border: 5px solid black;
width: 200px;
height: 200px;
}
.blue {
background-color: blue;
}<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="style.css">
<title>Document</title>
</head>
<body>
<table>
<tr>
<td>Aviliable</td>
<td>Aviliable</td>
<td>Aviliable</td>
</tr>
<tr>
<td>Aviliable</td>
<td>Aviliable</td>
<td>Aviliable</td>
</tr>
<tr>
<td>Aviliable</td>
<td>Aviliable</td>
<td>Aviliable</td>
</tr>
</table>
<script src="script.js"></script>
</body>
</html>我认为这对您有用
function changeColor(cell){
var elems = document.querySelectorAll("th");
[].forEach.call(elems, function(el) {
// alert("hello");
el.classList.remove("blue");
});
cell.classList.add("blue");
}.blue{
background-color:blue
}<table border="1px" width="100%">
<tr>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
</tr>
<tr>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
</tr>
<tr>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
<th onclick="changeColor(this)">1</th>
</tr>
</table>