Question

我有这个简单的HTML与表元素上的一些JavaScript。我有两个按钮，如偶数和奇数。当偶数按钮点击我想要元素属于类甚至应该有黄色背景。并且类似地，当单击奇数按钮时，具有类Odd的行应该变为黄色。下面是我编写的代码，但点击一个按钮，它只改变一行的颜色。任何人都可以建议。也许我可以计算行数，然后使用for循环，但下面的代码有什么问题？

<!DOCTYPE html>
<html>
<head>
    <title>Even & Odd row event</title>
</head>
<body>
<table id="tab">
    <thead>
        <tr class="hdr">
            <th>Name</th>
            <th>Age</th>
            <th>Module</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>AAA</td>
            <td>32</td>
            <td>HANA UI5</td>
        </tr>
        <tr class="even">
            <td>BBB</td>
            <td>33</td>
            <td>PI</td>
        </tr>
        <tr class="odd">
            <td>CCC</td>
            <td>37</td>
            <td>CDS</td>
        </tr>
        <tr class="even">
            <td>DDD</td>
            <td>32</td>
            <td>FIORI UI5</td>
        </tr>
    </tbody>

</table>
<button id="btn1">Even</button>
<button id="btn2">Odd</button>

<script type="text/javascript" src="dom7.js"></script>
</body>
</html>

var btn1 = document.querySelector("#btn1");
var btn2 = document.querySelector("#btn2");


btn1.onclick = function(){
    var c1 = document.querySelector(".odd");
    c1.style.backgroundColor = "whit`enter code here`e";
    var c2 = document.querySelector(".even");
    //debugger;
    c2.style.backgroundColor = "yellow";
}

btn2.onclick = function(){
    var c3 = document.querySelector(".odd");
    c3.style.backgroundColor = "yellow";
    var c4 = document.querySelector(".even");
    c4.style.backgroundColor = "white";
}

Answer 1

Document#querySelector返回单个节点。请改用Document#querySelectorAll，因为它返回一组节点。然后使用.forEach()迭代节点以指定背景颜色。

注意：Document＃querySelectorAll返回elementList（nodeList的子类），而不是数组。 forEach对forEach的支持是有限的。如果nodeList不适合您，请将odd转换为数组 - 请参阅even和var btn1 = document.querySelector("#btn1"); var btn2 = document.querySelector("#btn2"); var odd = document.querySelectorAll(".odd"); // [].slice.call(document.querySelectorAll(".odd"), 0); var even = document.querySelectorAll(".even"); // [].slice.call(document.querySelectorAll(".even"), 0) function updateRowColors(color_odd, color_even) { odd.forEach(function updateColor(el) { el.style.backgroundColor = color_odd; }); even.forEach(function updateColor(el) { el.style.backgroundColor = color_even; }); } btn1.onclick = function(){ updateRowColors('white', 'yellow'); } btn2.onclick = function(){ updateRowColors('yellow', 'white'); }变量的注释。

＆＃13;

<table id="tab">
    <thead>
        <tr class="hdr">
            <th>Name</th>
            <th>Age</th>
            <th>Module</th>
        </tr>
    </thead>
    <tbody>
        <tr class="odd">
            <td>AAA</td>
            <td>32</td>
            <td>HANA UI5</td>
        </tr>
        <tr class="even">
            <td>BBB</td>
            <td>33</td>
            <td>PI</td>
        </tr>
        <tr class="odd">
            <td>CCC</td>
            <td>37</td>
            <td>CDS</td>
        </tr>
        <tr class="even">
            <td>DDD</td>
            <td>32</td>
            <td>FIORI UI5</td>
        </tr>
    </tbody>

</table>
<button id="btn1">Even</button>
<button id="btn2">Odd</button>

＆＃13;

findFragmentById

＆＃13;

Answer 2

来自w3schools的

：

querySelector（）方法返回与文档中指定的CSS选择器匹配的第一个元素。注意：querySelector（）方法仅返回与指定选择器匹配的第一个元素。要返回所有匹配项，请改用querySelectorAll（）方法。

Answer 3

要么使用选择器，要么将属性添加到css类：

document.querySelector('.even').style.backgroundColor = 'yellow';

querySelector返回与查询匹配的第一个元素。

javascript设置样式仅限第一个元素

3 个答案: