2014-10-20 171 views
0

我不知道是否有可能做,但我这是我的代码。改变背景颜色onclick

function start(blauw){ 
    document.getElementById(blauw).style.background="white"; 
} 

<table> 
    <tr> 
     <td id= niks></td> 
     <td id= niks></td> 
     <td id= blauw onclick="start(id)">1</td> 
     <td id= blauw onclick="start(id)">2</td> 
     <td id= blauw>3</td> 
     <td id= blauw>4</td> 
     <td id= blauw>5</td> 
     <td id= blauw>6</td> 
     <td id= blauw>7</td> 
     <td id= blauw>8</td> 
     <td id= niks></td> 
     <td id= niks></td> 
    </tr> 
</table> 

我想实现,如果我点击它的背景将变成白色,所以人们现在他们是什么预订。但是我必须给所有东西都提供一个自己的ID吗?因为现在如果我点击“2”,只有“1”变成白色,“2”不会变成白色。

(原谅我的英语不好)

+6

'在HTML id'属性必须是唯一的。如果您想将相同的ID应用于多个元素,请改用'class',并使用'getElementsByClassName'来定位它。 – 2014-10-20 14:38:58

回答

1

而不是传递的属性,只是通过元素itselfe:

 function start(element) { 
 
      element.style.background = "green"; 
 
     }
<table> 
 
     <tr> 
 
      <td class=niks></td> 
 
      <td class=niks></td> 
 
      <td class=blauw onclick="start(this)">1</td> 
 
      <td class=blauw onclick="start(this)">2</td> 
 
      <td class=blauw>3</td> 
 
      <td class=blauw>4</td> 
 
      <td class=blauw>5</td> 
 
      <td class=blauw>6</td> 
 
      <td class=blauw>7</td> 
 
      <td class=blauw>8</td> 
 
      <td class=niks></td> 
 
      <td class=niks></td> 
 
     </tr> 
 
    </table>

而作为在评论中提到 - ID`s有独一无二!

编辑:

改变功能切换背景颜色。

function start(element) { 
     var backgroundColor = element.style.background; 
     if (backgroundColor === "green") { 
      element.style.background = "red"; 
     } else { 
      element.style.background = "green"; 
     } 
    } 

所以这是一个非常简单的演示

FIDDLE

+0

我可以这样做吗?如果颜色是白色的,我可以把它变成原来的颜色? – 2014-10-20 15:00:19

+0

当然你可以!我会做一个小样本。但是jQuery呢?你可以使用jQuery? – 2014-10-20 15:02:35

+0

从未使用jQuery。这是我的学校项目,我刚刚开始一个月:) – 2014-10-20 15:03:43