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

发布时间:2020-07-31 05:34:35 作者:小旭依然
来源:网络 阅读:347
<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);


推荐阅读:
  1. 利用jQuery实现表格的隔行变色、高亮显示
  2. jQuery插件--表格隔行变色

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

js j

上一篇:公司突然断网故障排查

下一篇:09-02-部署边缘服务器-2-设计拓朴

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》