如何实现鼠标经过动态表格背景变色?

<!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>鼠标划过表格行背景变色效果实例</title>
<script type="text/javascript"><!--
 function over(obj){
if(obj.className=='click')return;   
obj.className = 'over';
 }
 function out(obj){
if(obj.className=='click')return;   
obj.className="out";
 }
 function clicked(obj){
var mytable = document.getElementById("table")
for(var i=0;i<mytable.rows.length;i++){
if(obj == mytable.rows[i]){
if(obj.className == 'click') {obj.className = 'out'} else {obj.className = 'click'};
} else {
mytable.rows[i].className = 'out';
}
}
 }
</script> 
<style>
.over   {   background-color:#006600;   color:#ffffff;   cursor:default;   }  
.click   {   background-color:#000000;   color:#ffffff;   cursor:default;   }  
.out   {   background-color:#ffffff;   cursor:default;   }   
.common   {   background-color:red;   cursor:default;   }   
#table{width:600px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
#table th{background:#EEE;border-bottom:1px solid #CCC;padding:4px; text-align:left;}
#table td{border:1px solid #EEE;padding:4px;}
</style>
</head>
<body>
<table id="table">
 <tr>
   <th>栏目名称</th>
   <th>网　址</th>
   <th>文章数</th>
   <th>网　站</th>
 </tr>
 <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)" >
   <td>CSS版式布局</td>
   <td>www.www.com</td>
   <td>52</td>
   <td>测试</td>
 </tr>
 <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">
   <td>DIV+CSS</td>
   <td>www.www.com</td>
   <td>124</td>
   <td>测试</td>
 </tr>
 <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">
   <td>DIV+<a href="http://www.aa25.cn/css-2.shtml" mce_href="http://www.aa25.cn/css-2.shtml" title='CSS实例' target='_blank'>CSS实例</a></td>
   <td>www.www.com</td>
   <td>88</td>
   <td>测试</td>
 </tr>
</table>
</body>
</html>
如题,静态的表格可以实现，可动态的JSP网页从数据读取记录重复表格，应该怎么定义或修改呢？
上面的代码在运行以后只有第一行表格是鼠标经过背景变色，后面的都没反应了javascriptcss onmouseoveronmouseout颜色

解决方案 »

  1.   

    <!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>鼠标划过表格行背景变色效果实例</title>
    <script type="text/javascript"><!--
     function over(obj){
    if(obj.className=='click')return;   
    obj.className = 'over';
     }
     function out(obj){
    if(obj.className=='click')return;   
    obj.className="out";
     }
     function clicked(obj){
    var mytable = document.getElementById("table")
    for(var i=0;i<mytable.rows.length;i++){
    if(obj == mytable.rows[i]){
    if(obj.className == 'click') {obj.className = 'out'} else {obj.className = 'click'};
    } else {
    mytable.rows[i].className = 'out';
    }
    }
     }
    </script> 
    <style>
    .over   {   background-color:#006600;   color:#ffffff;   cursor:default;   }  
    .click   {   background-color:#000000;   color:#ffffff;   cursor:default;   }  
    .out   {   background-color:#ffffff;   cursor:default;   }   
    .common   {   background-color:red;   cursor:default;   }   
    #table{width:600px;border-collapse:collapse;border:1px solid #EEE;font-size:14px;}
    #table th{background:#EEE;border-bottom:1px solid #CCC;padding:4px; text-align:left;}
    #table td{border:1px solid #EEE;padding:4px;}
    </style>
    </head>
    <body>
    <table id="table">
     <tr>
       <th>栏目名称</th>
       <th>网　址</th>
       <th>文章数</th>
       <th>网　站</th>
     </tr>
     <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)" >
       <td>CSS版式布局</td>
       <td>www.www.com</td>
       <td>52</td>
       <td>测试</td>
     </tr>
     <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">
       <td>DIV+CSS</td>
       <td>www.www.com</td>
       <td>124</td>
       <td>测试</td>
     </tr>
     <tr onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">
       <td>DIV+<a href="http://www.aa25.cn/css-2.shtml" mce_href="http://www.aa25.cn/css-2.shtml" title='CSS实例' target='_blank'>CSS实例</a></td>
       <td>www.www.com</td>
       <td>88</td>
       <td>测试</td>
     </tr>
    </table>
    </body>
    </html>
      

  2.   

     
    <script type="text/javascript" src="js/jQuery_v1.10.2.js"></script>
    $(document).ready(function() {
    //鼠标效果
        $("#showData").delegate("#pin_table tr,#zheng_table tr", "mouseover", function() {  //绑定鼠标悬浮事件
            $(this).toggleClass("tr_mouseover"); //修改#zheng_table下tr的背景
        }).delegate("tr", "mouseout", function() {    //鼠标移出tr后，还原背景
            $(this).removeClass("tr_mouseover");
        })
    });
    找到你JS输出动态表的 父亲 的DIV 
    然后儿子 表格名字 
    其中的tr_mouseover 是CSS样式中的CLASS