如何让选中的一行记录高亮显示

table高亮显示

解决方案 »

  1.   

    点中高亮，再点还原。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
     <head>
      <title> New Document </title>
      <style type="text/css">
      .on td{background:#FF0000; color:#FFF;}
      .normal td{background:#FFFFFF; color:#000;}
      </style>
     </head> <body> <table id="table">
    <tr>
    <td>name1</td>
    <td>111111111111111111111111111111111111111111111</td>
    </tr>
    <tr>
    <td>name2</td>
    <td>222222222222222222222222222222222222222222222</td>
    </tr>
    <tr>
    <td>name3</td>
    <td>333333333333333333333333333333333333333333333</td>
    </tr>
    </table> <script type="text/javascript">
    var alltr = document.getElementById("table").getElementsByTagName('tr');
    for(var i=0,len=alltr.length; i<len; i++){
    alltr[i].onclick = function(){
    if(this.className!='on'){
    this.className = 'on';
    }else{
    this.className = 'normal';
    }
    }
    }
    </script> </body>
    </html>
      

  2.   

    $(function(){$("#tbStu tr:nth-child(odd)").css("background-color","#fff"); //隔行变色  $("#tbStu tr").hover( function(){$(this).css("background-image","url(../common/style/blue/images/table_title_bg.png)");},
    function(){$(this).css("background-image","");});
    })
      

  3.   

     css 
     .trMouseover{
        background-color: red
    }//jquery 鼠标经过色
        $("#tb_list tbody tr").hover(function () {
                    $(this).addClass("trMouseover");
                }, function () {
                    $(this).removeClass("trMouseover");
                });
      

  4.   

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style>
    ul{list-style-type: none;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var test = document.getElementById('test');
    test.onclick=function(e){
    e = e||window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName!=='li')
    {
    if(target.style.color=="red"){return false;}
    else{target.style.color="red"}
    } }
    }
    </script>
    <body>
    <UL id="test">
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    </UL>
    </body>
    </html>
      

  5.   

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style>
    ul{list-style-type: none;}
    </style>
    <script type="text/javascript">
    window.onload=function(){
    var test = document.getElementById('test');
    test.onclick=function(e){
    var li_group = document.getElementsByTagName('li');
    for(var i=0;i<li_group.length;i++)
    {
    li_group[i].style.background='white';
    }
    e = e||window.event;
    var target = e.target || e.srcElement;
    if(target.nodeName!=='li')
    {
     target.style.background="red";
    } }
    }
    </script>
    <body>
    <UL id="test">
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    <LI>DASDAD</LI><br />
    </UL>
    </body>
    </html>稍微写了下。如果用jquery可以更方便。参考下上面大神的写法