更改表格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做到）