Question

我使用html设计了一个2 * 4的表。我需要在单击奇数鼠标时将单元格的背景颜色从白色（默认）更改为绿色，反之亦然。尽管只点击了任何单元格第一个细胞从白色变为绿色，反之亦然。请帮助我。谢谢。

<script type="text/javascript">
    function change(){
        var s=document.getElementById('slot');
        if(s.bgColor.match("white")){
            s.bgColor="green";
        }
        else{
            s.bgColor="white";
        }    
    }    
</script>

Answer 1

我在这里回答了类似的问题

Javascript .addEventListener "mouseenter" for a class

不同之处在于这涉及click事件，并且没有css伪选择器。

首先使用td查询所有querySelectorAll元素的列表。

接下来循环并为每个人添加click event侦听器。

可以通过多种方式设置类，但我建议使用className方法。要在类之间切换，三元运算符是我们最好的朋友。

this.className = this.className == "white" ? "green": "white";

这意味着它根据当前值设置类。

＆＃13;

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

＆＃13;

.green { background: green; color: white; }
.white { background: white; color: black; }

#sales-list { border: 1px solid black; }
td { padding: 10px; border: 1px solid black; }

＆＃13;

<table id="sales-list">
  <tr>
    <td class="white">Row 1 Col 1</td>
    <td class="white">Row 1 Col 2</td>
    <td class="white">Row 1 Col 3</td>
    <td class="white">Row 1 Col 4</td>
  </tr>
  <tr>
     <td class="white">Row 2 Col 1</td>
     <td class="white">Row 2 Col 2</td>
     <td class="white">Row 2 Col 3</td>
     <td class="white">Row 2 Col 4</td>
  </tr>
</table>

＆＃13;

使用html在鼠标点击上更改表格单元格的颜色

1 个答案: