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

Posted 2020-07-16

<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);