码迷,mamicode.com
首页 > Web开发 > 详细

表格隔行变色js代码,创建属性

时间:2016-05-29 23:30:41      阅读:356      评论:0      收藏:0      [点我收藏+]

标签:js

<table summary="when and where you can see the band">
      <thead>
      <tr>
        <th>Date</th>
        <th>City</th>
        <th>Venue</th>
      </tr>
      </thead>
      <tbody>
      <tr>
        <td>June 9th</td>
        <td>Portland, <abbr title="Oregon">OR</abbr></td>
        <td>Crystal Ballroom</td>
      </tr>
      <tr>
        <td>June 10th</td>
        <td>Seattle, <abbr title="Washington">WA</abbr></td>
        <td>Crocodile Cafe</td>
      </tr>
      <tr>
        <td>June 12th</td>
        <td>Sacramento, <abbr title="California">CA</abbr></td>
        <td>Torch Club</td>
      </tr>
      <tr>
        <td>June 17th</td>
        <td>Austin, <abbr title="Texas">TX</abbr></td>
        <td>Speakeasy</td>
      </tr>
      </tbody>
    </table>
function stipeTables(){
if(!document.getElementsByTagName) return false;
var tables = document.getElementsByTagName("table");
var odd,rows;
for(var i = 0; i < tables.length; i++){
odd = false;
rows = tables[i].getElementsByTagName("tr");
for(var j = 0; j < rows.length; j++){
if(odd == true){
addClass(rows[j],"odd");//rows[j].style.backgroundColor = "#ffc"; 就兼容了
odd = false;
}else{ odd = true;}
}
}
}

function highlightRows(){
if(!document.getElementsByTagName) return false;
var rows = document.getElementsByTagName("tr");
for(var i = 0; i < rows.length; i++){
rows[i].oldClassName = rows[i].className;//把原来的cassName属性保存到自定义属性当中
rows[i].onmouseover = function(){
addClass(this,"highlight")  ;                               //this.style.fontWeight = "bold";
}
rows[i].onmouseout = function(){
this.className = this.oldClassName;                           //this.style.fontWeight = "normal";
}
}
}

addLoadEvent(stipeTables);
addLoadEvent(highlightRows);


表格隔行变色js代码,创建属性

标签:js

原文地址:http://xuyran.blog.51cto.com/11641754/1784237

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!