如何更改 <td> 使用JavaScript單擊時的背景顏色？

Question

Java語言的新手，正嘗試直接使用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');
  } );
} );

Answer 1

僅使用javascript，不使用jquery

Java腳本

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/

如何更改 <td> 使用JavaScript單擊時的背景顏色？

問題描述

1 個解決方案

解決方案1
3 已采納 2014-06-17 12:45:46

如何更改 <td> 使用JavaScript單擊時的背景顏色？

問題描述

1 個解決方案

解決方案1 3 已采納 2014-06-17 12:45:46

解決方案1
3 已采納 2014-06-17 12:45:46