求一个JS代码，关于点击单元格和文字同时变化的问题
<table width="250" border="0" cellspacing="0" cellpadding="0">
  <tr bgcolor="#006633">
    <td><a href="1.asp">菜单1</a></td>
    <td><a href="2.asp">菜单2</a></td>
    <td><a href="3.asp">菜单3</a></td>
    <td><a href="4.asp">菜单4</a></td>
    <td><a href="5.asp">菜单5</a></td>
  </tr>
</table>


我想做到，当我把鼠标移到菜单1的单元格上面，该单元格背景变色（红），同时“菜单1”几个字也变颜色（白）。当点击之后，单元格变红，字变白。
移到菜单2时，菜单1的了及单无格复原……
------解决方案--------------------

<script type="text/javascript">

window.onload = function(){

    var table = document.getElementById('table');

    var links = table.getElementsByTagName('a');

    for(var i = 0 ; i < links.length ; ++i){

        links[i].onmouseover = function(){

            this.style.color = '#FFFFFF';

            getParent(this).style.backgroundColor='#FF0000';

        }

        links[i].onmouseout = function(){

            this.style.color = '';

            getParent(this).style.backgroundColor='';   

        }

    }



}

function getParent(note){

    var parent = note.parentNode;

    if(parent.nodeType==1){

        return parent;

    }else{

        return getParent(parent);

    }

}

</script>

<table id="table" width="250" border="0" cellspacing="0" cellpadding="0">

  <tr bgcolor="#006633">

    <td><a href="javascript:void(0);">菜单1</a></td>

    <td><a href="javascript:void(0);">菜单2</a></td>

    <td><a href="javascript:void(0);">菜单3</a></td>

    <td><a href="javascript:void(0);">菜单4</a></td>

    <td><a href="javascript:void(0);">菜单5</a></td>

  </tr>

</table>

------解决方案--------------------

<style type="text/css">

.a{background-color:red;color:#FFFFFF}

.b{background-color:red;}

.c{color:#FFFFFF}

</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript">

	$(function(){

		$("table tr td").hover(function(){

			if(!$(this).hasClass("b")){

				$(this).addClass("a");

			}

		},function(){

			if(!$(this).hasCla