如何使用 JavaScript 在点击时更改 <td> 背景颜色？答案

【问题标题】：How to change a <td> background color on click using JavaScript?如何使用 JavaScript 在点击时更改 <td> 背景颜色？
【发布时间】：2014-08-07 11:06:03
【问题描述】：

我是 Javascript 的新手，我正在尝试直接使用 DOM 而不是使用 jQuery（下面使用 jQuery）来完全像下面的 http://jsbin.com/ajalu/40 那样做。我该怎么做？

HTML：

<!DOCTYPE html>
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<!--[if IE]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<style>
  article, aside, figure, footer, header, hgroup, 
  menu, nav, section { display: block; }
  .on { background-color:red; color:#ffffff; }
</style>
</head>
<body>
  <table border="1" cellpadding="10">
    <tbody>
      <tr>
        <td>Hello World</td>
        <td>Hello World</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World</td>
      </tr>
      <tr>
        <td>Hello World</td>
        <td>Hello World</td>
      </tr>
    </tbody>
  </table>
</body>
</html>

使用 jQuery 的 JavaScript：

$( function() {
  $('td').click( function() {
    $(this).parents('table').find('td').each( function( index, element ) {
        $(element).removeClass('on');
    } );
    $(this).addClass('on');
  } );
} );

【问题讨论】：

您在尝试这样做时遇到了什么问题..？
始终将相关代码和标记放入问题中，不要只是链接。链接失效了，人们不应该离开网站来帮助你。
旁注：使用 jQuery 并不意味着您没有使用 JavaScript。 jQuery 是一个实用函数库，而不是一种语言。你的意思是，“直接使用 DOM 而不是 jQuery”。
@Crowder - 抱歉，我发布了链接！
@Basky：所以请使用“编辑”链接将信息放入。（这次我已经为您完成了。）

标签： javascript html html-table onclick

【解决方案1】：

只使用 javascript，不使用 jquery

Javascript

function Change(node){

 var j=document.getElementsByClassName("on");
  for(var i=0;i<j.length;i++){
    j[i].className="";
    }  
  node.className="on";  

    }

HTML

<table border="1" cellpadding="10">
      <tr >
        <td onclick="Change(this)">Hello World</td>
        <td onclick="Change(this)">Hello World</td>
      </tr>
      <tr>
        <td onclick="Change(this)">Hello World</td>
        <td onclick="Change(this)">Hello World</td>
      </tr>
      <tr>
        <td onclick="Change(this)">Hello World</td>
        <td onclick="Change(this)">Hello World</td>
      </tr>
  </table>

CSS

.on{

    background-color:red;
}

小提琴：- http://jsfiddle.net/8SnHq/1/

【讨论】：