Question

这是我的简单代码，我希望当用户单击第一个单元格时它将变成蓝色背景（仅单击的单元格）。我认为唯一的问题是我不知道如何选择/引用特定单元格，因为它是一个嵌套元素。

**如果您可以通过“按标签名称”进行操作，那就太好了。

感谢您的帮助！

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";
}

Answer 1

通过标签名称获取元素可以正常工作。您首先要从文档中获取第一行（因此您使用document.getElementsByTagName（））现在您已经有了第一行，从那里开始，您只需要使用getElementsByTagName（您不想搜索文档，只需搜索该行即可。已经得到）。

var td = document.getElementsByTagName("tr")[0].getElementsByTagName("td")[0]


td.onclick = function () {
  td.classList.add("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>

Answer 2

使用event.target选择要为其添加样式的单元格，

var firstTableRow = document.getElementsByTagName("tr")[0];
firstTableRow.addEventListener('click', function(event){
    event.target.classList.add('blue');
})

Fiidle Link

Answer 3

我认为这对您有用

    for (int code = 0; code < pow(2, n); code++) {
        printf("{");
        counter = 0;
        for (int i = 0; i < n; i++) {
            if (code & (1 << i)) {
                counter++;
                if (counter == 1)
                    printf("%d", nums[i]);
                else
                    printf(", %d", nums[i]);
            }
        }
        puts("}");
    }

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
}

如何使用VANILLA JS将类添加到嵌套Dom元素

3 个答案: