So ändern Sie die Hintergrundfarbe einer Zelle in einer Tabelle mit Java-Skript

Question 1

Ich muss die Hintergrundfarbe einer einzelnen Zelle in der Tabelle mit Java-Skript ändern.

Während des Dokuments muss der Stil aller Zellen gleich sein (so verwendetes Stylesheet, um dies hinzuzufügen.), aber beim Klicken auf die Schaltfläche muss ich die Farbe der ersten Zelle ändern.

Im Folgenden finden Sie den Beispielcode

<html lang="en">
  <head>    
    <script type="text/javascript" >        

    function btnClick()
    {
            var x = document.getElementById("mytable").cells;
            x[0].innerHTML = "i want to change my cell color";
            x[0].bgColor = "Yellow";            
    }
    </script>   
</head>
    <style>
    div
    {
    text-align: left; 
    text-indent: 0px; 
    padding: 0px 0px 0px 0px; 
    margin: 0px 0px 0px 0px;
    }
    td.td
    {
                 border-width : 1px; 
                 background-color: #99cc00;
                 text-align:center;

    }
    </style>  
  <body>
  <div>  
    <table id = "mytable" width="100%" border="1" cellpadding="2" cellspacing="2" style="background-color: #ffffff;">
      <tr valign="top">
      <td class = "td"><br />  </td>
      <td class = "td"><br />  </td>
      </tr>
      <tr valign="top">
      <td class = "td"><br />  </td>
      <td class = "td"><br />  </td>
      </tr>
    </table>
  </div>
      <input type="button" value="Click" OnClick = "btnClick()">
  </body>
</html>

Question 2

Versuche dies:

function btnClick() {
    var x = document.getElementById("mytable").getElementsByTagName("td");
    x[0].innerHTML = "i want to change my cell color";
    x[0].style.backgroundColor = "yellow";            
}

Satz von JS, backgroundColor ist das Äquivalent von background-color in Ihrem Stylesheet.

Beachten Sie auch, dass die .cells Sammlung gehört zu einer Tabelle die Zeile, nicht auf den Tisch selbst. Um alle Zellen aus allen Zeilen zu erhalten, können Sie stattdessen verwenden getElementsByTagName().

Demo: http://jsbin.com/ekituv/edit#preview

Question 3

<table border="1" cellspacing="0" cellpadding= "20">
    <tr>
    <td id="id1" ></td>
    </tr>
</table>
<script>
    document.getElementById('id1').style.backgroundColor="#003F87";
</script>

Geben Sie die ID für die Zelle ein und ändern Sie dann den Hintergrund der Zelle.

Question 4

document.getElementById('id1').bgColor="#00FF00";

scheint zu funktionieren. Ich denke nicht .style.backgroundColor tut.