20分提问: 改变tr的class值的问题

提示一下：JS中是用className而不是class.....

解决方案 »

  1.   

    "我看过遍历table的,我这个应该可以实现,但我不知道怎么改"--这一句看不明白..不知道是不是这样...<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    <!--
    .class1 {
    font-size:16px;
    font-family:Verdana,sans-serif;
    background-color:#400000;
    color:white;
    }
    .class2 {
    font-size:12px;
    background-color:#CCC;
    }table {
    border:1px solid #008000;
    width:300px;
    }-->
    </style>
    <script type="text/javascript">
    <!--
    function changeTrStyle(tr) {
    tr.className = "class1";
    }
    -->
    </script>
    </head><body>
    <table>
    <tr class="class2" onclick="changeTrStyle(this);"><td>111</td><td>111</td></tr>
        <tr class="class2"><td>222</td><td>222</td></tr>
    </table>
    </body>
    </html>
      

  2.   

     每个<tr  onclick="changeTrStyle(this);">都要有加oncick function changeTrStyle(tr) {
            tr.className = "class1";
        }
    函数同时设其他tr的class为空
    其实用id更好，Id 是唯一的，先查Id  删除，再设function changeTrStyle(tr) {
           var tid=getelementbyid("myid")
            tid.value=""
           this.id="myid"
        }//上面的不一定正确，但就是那个意思<table> 
    <tr  onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr> 
    <tr onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr> 
    <tr onclick="changeTrStyle(this) > <td> 111 </td> <td> 111 </td> </tr> 
    <tr onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr> 
    <tr onclick="changeTrStyle(this)> <td> 111 </td> <td> 111 </td> </tr> 
    </table> 
      

  3.   

    fxs_2008方法不错
    试了一下<script>
    function   changeTrStyle(tr)   { 
              var  tid=document.getElementById("myid") ;
              tid.id="" ;
              tr.id="myid" ;
            } 
    </script>
    <style>
    #myid{font-size:16px;
        font-family:Verdana,sans-serif;
        background-color:#400000;
        color:white;}
    </style><em id="myid"></em>
    <table border=1>   
    <tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)"   id="" >   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)" id="">   <td>   111   </td>   <td>   111   </td>   </tr>   
    </table>   
      

  4.   

    修改二楼 实现取消别的tr样式
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>test</title>
    <style type="text/css">
    <!--
    .class1 {
        font-size:16px;
        font-family:Verdana,sans-serif;
        background-color:#400000;
        color:white;
    }
    .class2 {
        font-size:12px;
        background-color:#CCC;
    }table {
        border:1px solid #008000;
        width:300px;
    }-->
    </style>
    <script type="text/javascript">
    <!--
        var oldTr;
        function changeTrStyle(tr) {
            tr.className = "class1";
            if(oldTr)
            {
                oldTr.className = "class2";
            }
            oldTr = tr;
        }
    -->
    </script>
    </head><body>
    <table>
        <tr class="class2" onclick="changeTrStyle(this);"><td>111</td><td>111</td></tr>
        <tr class="class2" onclick="changeTrStyle(this);"><td>222</td><td>222</td></tr>
    </table>
    </body>
    </html>
      

  5.   

    5楼也正确
    但html有冗余em id="myid"></em>  可加if语句判断
    <script>
    function   changeTrStyle(tr)   { 
              var  tid=document.getElementById("myid") ;
              if(tid)
              {
                  tid.id="";
              }
              tr.id="myid";
            } 
    </script>
    <style>
    #myid{font-size:16px;
        font-family:Verdana,sans-serif;
        background-color:#400000;
        color:white;}
    </style>
    <table border=1>
    <tr   onclick="changeTrStyle(this)">   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)">   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)">   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)">   <td>   111   </td>   <td>   111   </td>   </tr>   
    <tr   onclick="changeTrStyle(this)">   <td>   111   </td>   <td>   111   </td>   </tr>   
    </table>  
      

  6.   

    实践出真理6楼的再改下就好了:
    <script   type="text/javascript"> 
    <!-- 
    var   oldTr; 
    function   changeTrStyle(tr){ 
    if(oldTr) 
    { 
      oldTr.className   =   "class2"; 
    } 
    tr.className  =  "class1"; 
                    
    oldTr   =   tr; 
    } 
    --> 
    </script>就是把if语句放前面去了,这样的话,如果只有一行,那么这一行的颜色不会变了!
      

  7.   

    给你个类似的吧，不知道有用吗：
    <script>
    var   obj   =   null;
    function hilight() {         
    var e=window.event.srcElement;         
    e=e.parentElement;         
    if(e.tagName!="TR") return;
    if(obj!=null) obj.runtimeStyle.backgroundColor="";
    obj=e;   
    obj.runtimeStyle.backgroundColor="#FFE28C";
    }
    </script><table border=1>
    <tr onclick='hilight();'>
    <td>aa</td>
    </tr>
    <tr onclick='hilight();'>
    <td>bb</td>
    </tr>
    <tr onclick='hilight();'>
    <td>cc</td>
    </tr>
    </table>