javascript - 更改表格中每个单元格的颜色 HTML JavaScript CSS

Question

当我点击按钮时，我的代码只会改变所有表格的颜色。请注意，每个单元格之间都有一个空格，所以我发现我需要更改表格中每个单元格的颜色，而不是表格本身。任何建议，我都是 JS 和 CSS 的新手。

 <script type="text/javascript">
 function color(){
    document.getElementById('mytable').style.backgroundColor ="blue";
 }
 </script>

Answer 1

我建议您将函数的新内容更改clear()为其他内容 - 我不相信这个词在内联时用作函数名称时会起作用。这是因为，正如@Dennis 提到的， document.clear将在之前的链中找到window.clear。有关详细信息，请参阅此问题。

---

这是一个工作的jsFiddle。

一种方法可能是这样的：

function color(){
   var x = document.getElementsByTagName('td');
   for(i=0;i<x.length;i++) {
     x[i].style.backgroundColor ="blue";
   }
}

function clearit(){
   var x = document.getElementsByTagName('td');
   for(i=0;i<x.length;i++) {
     x[i].style.backgroundColor = "";
   }
}

Answer 2

你可以这样做：

CSS

td.blueCol { background-color: blue; }

JS

function color() {
    var tds = document.getElementById('mytable').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++) {
        // set a class which defines the background color
        tds[i].className = "blueCol";
    }
}

function clear() {
    var tds = document.getElementById('mytable').getElementsByTagName('td');
    for (var i = 0; i < tds.length; i++) {
        // re-set a class which defines the background color
        tds[i].className = "";
    }
}

Answer 3

将您的表格标签更改为以下内容：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
...
</table>

为了删除间距（或者你可以通过 css 来做）