绑定数据，点击更改每一行颜色？

在.net中绑定数据，有四行，打开这个页面，默认选的是第一行，样式表示选中的颜色，点击第二行，第二行变色，第一行恢复默认颜色。一猜类推，我自己先做了一个html测试的样式，代码如下：
<style>
.left_nav{
font-family:Verdana;
font-size:20px;
color:#ffffff;
background-color:#0476AC;
text-align:left;
padding-left:10px;
    padding-top:5px;
padding-bottom:5px;
}
.left_nav a{
font-family:Verdana;
font-size:20px;
color:#ffffff;
text-decoration:none;
}
.left_nav2{
font-family:Verdana;
font-size:20px;
font-weight:bold;
color:#ffffff;
background-color:#03547A;
padding-left:10px;
padding-top:5px;
padding-bottom:5px;
text-align:left;
}
.left_nav2 a{
font-family:Verdana;
font-size:20px;
color:#ffffff;
text-decoration:none;
}
</style>
<script>
var cur;
function doit(){   var obj = event.srcElement;
   if(cur == obj) obj.className = "left_nav2";
   if(cur!=null) cur.className = "left_nav";
   obj.className = "left_nav2";
   cur = obj;
   var n = obj.innerText;
   //hf.location.href= "index.asp?n=" + escape(n) + "&" +escape(new Date());
   document.addform.key.value=obj.innerText;
}
window.onload=function(){
    var tb1 = document.getElementById("tbb");
    var a = tb1.getElementsByTagName("td");
    for(var i=0;i<a.length;i++){
       a[i].onclick=doit;
    }
}
</script>
<table cellpadding="0" cellspacing="0"  border="0" id="tbb">
<tr><td class="left_nav2">111111</td></tr>
<tr>
              <td height="5"> </td>
            </tr>
<tr><td class="left_nav">222222</td></tr>
<tr>
              <td height="5"> </td>
            </tr>
<tr><td class="left_nav">333333</td></tr>
<tr>
              <td height="5"> </td>
            </tr>
<tr><td class="left_nav">444444</td></tr>
<tr>
              <td height="5"> </td>
            </tr>
<tr><td class="left_nav">555555</td></tr>
</table>
问题出来了，点击（除了第一行以外）颜色，斗变换正常，
就是默认打开这个页面，第一行颜色，默认选中，
我点第二行的时候，第二行颜色选中，第一行颜色还是选中，除非我点下编第一行，这样再点击其它行的时候，
才会正常变换，大家可以把html复制到本地试试，我该如何更改js中的值啊，或者给点好的方法，一定要默认打开这个页面，第一行，选中，然后点击其它行，再进行颜色变换。。

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

点击某行时。。首先找到该table下面样式为class="left_nav2"的行样式移除再设置为left_nav2,然后把点击的行样式设置为left_nav2.
这个不是想象的那难吧
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="list.aspx.cs" Inherits="WebCombres.list" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>无标题页</title>
    <style>
        .left_nav
        {
            font-family: Verdana;
            font-size: 20px;
            color: #ffffff;
            background-color: #0476AC;
            text-align: left;
            padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
        }
        .left_nav a
        {
            font-family: Verdana;
            font-size: 20px;
            color: #ffffff;
            text-decoration: none;
        }
        .left_nav2
        {
            font-family: Verdana;
            font-size: 20px;
            font-weight: bold;
            color: #ffffff;
            background-color: #03547A;
            padding-left: 10px;
            padding-top: 5px;
            padding-bottom: 5px;
            text-align: left;
        }
        .left_nav2 a
        {
            font-family: Verdana;
            font-size: 20px;
            color: #ffffff;
            text-decoration: none;
        }
    </style>
    <script type="text/javascript" src="http://www.google.cn/jsapi"></script>
    <script type="text/javascript">
    google.load("jquery", "1.4.4");
    google.setOnLoadCallback(function(){
            $("#tbb").find('td').each(function(key,val){
               $(this).bind("click",function(){

                   $("#tbb").find('td').each(function(key,val){
                    if($(this).attr("class")=="left_nav2")
                        $(this).removeClass("left_nav2").addClass("left_nav");
                   });
                   $(this).removeClass("left_nav").addClass("left_nav2");
               })
            });
    });
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <table cellpadding="0" cellspacing="0" border="0" id="tbb">
        <tr>
            <td class="left_nav2">
                111111
            </td>
        </tr>
        <tr>
            <td height="5">
                 
            </td>
        </tr>
        <tr>
            <td class="left_nav">
                222222
            </td>
        </tr>
        <tr>
            <td height="5">
                 
            </td>
        </tr>
        <tr>
            <td class="left_nav">
                333333
            </td>
        </tr>
        <tr>
            <td height="5">
                 
            </td>
        </tr>
        <tr>
            <td class="left_nav">
                444444
            </td>
        </tr>
        <tr>
            <td height="5">
                 
            </td>
        </tr>
        <tr>
            <td class="left_nav">
                555555
            </td>
        </tr>
    </table>
    </form>
</body>
</html>测试成功
http://download.csdn.net/source/2929032
给你个hookee老大写的，参考一下，改一下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body>
<script>
onload=function(){
    var tbl = document.getElementById("tbl");
    for(var i = 0; i < tbl.rows.length; i++){
        tbl.rows[i].onclick =function(){
            if(window.cur) window.cur.style.background = "#FFF";
            this.style.background = "#CCC";
            window.cur = this;
        }
    }
}
</script><table id="tbl" cellspacing="0">
    <tr><td>xx</td><td>xx</td></tr>
    <tr><td>xx</td><td>xx</td></tr>
    <tr><td>xx</td><td>xx</td></tr>
    <tr><td>xx</td><td>xx</td></tr>
</table>
</body>
</html>