如何改变一个<td>背景颜色点击使用JavaScript

How to change a <td> background color on click using JavaScript?

本文关键字：背景 JavaScript 颜色 改变 何改变 一个 td      更新时间：2023-09-26

我是Javascript的新手，我试图像下面http://jsbin.com/ajalu/40一样直接使用DOM而不是使用jQuery(下面使用jQuery)。我该怎么做呢?

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>

JavaScript使用jQuery:

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

仅使用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/

相关文章：