日期:2014-05-16  浏览次数:20502 次

js:遍历table某一tr的所有td(当鼠标放在一个单元格上时,当前行的tr样式发生变化 )

<!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=gb2312" />
       <title>table的某一行td遍历</title>


       <style type="text/css">
                  table{border-collapse:collapse; width:200px; height:100px; text-align:center; font:"宋体"; font-                            size:15px; color:#666666; margin:20px 20px 20px 20px }
                  td{ height:50px}
                  tr.changeCss{ color:#FFFFFF; background-color:#000000}
                  tr.restoreCss{ color:#000000; background-color:#FFFFFF}

       </style>
  
   <script type="text/javascript">
        function  changeCss1()
           {
                 //event.srcElement设置或获取触发事件的对象。event.srcElement.parentElement获取触发事件的父标签对象
                  event.srcElement.parentElement.className="changeCss";
            }
        function  restoreCss1()
          {
                event.srcElement.parentElement.className="restoreCss";
          }
   </script>

</head>


<body>

      <!--遍历方式1-->
       <table border="1px">
           <tr onmouseover="changeCss1()" onmouseout="restoreCss1()">
                   <td>遍历演示0&l