Question

单击按钮时，我的代码只会更改所有表格的颜色。注意每个单元格之间有一个空格，所以我想出我需要在表格中的每个单元格上更改每个单元格的颜色，而不是它自己的表格。任何建议，我都是JS和CSS的新手。

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

Answer 1

我建议你将函数clear()的新内容更改为其他内容 - 我不相信这个单词在内联时用作函数名时会起作用。这是因为，正如@Dennis所说，document.clear将在window.clear之前的链中找到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 = ""; } }。 See this question了解更多相关信息。

Here's a working jsFiddle.

这样做的一种方法可能是这样：

{{1}}

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来实现）

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

3 个答案: