欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

JavaScript实现的斑马线表格效果【隔行变色】

程序员文章站 2022-05-14 19:09:26
本文实例讲述了javascript实现的斑马线表格效果。分享给大家供大家参考，具体如下： 虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootst...

本文实例讲述了javascript实现的斑马线表格效果。分享给大家供大家参考，具体如下：

虽然现在有很多框架可以轻松的实现斑马线效果，而且兼容性也很不错，比如bootstrap，但是不可否认的是使用javascript实现的是兼容性最强的（浏览器不支持或禁止javascript脚本除外），所以今天使用原生js实现了一个斑马线效果的表格，大家可以简单看一下，如果有需要可以留做脚本积累。

html表格部分：

<table>
  <thead>
  <tr>
    <th>date</th>
    <th>city</th>
    <th>venue</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>2017-06-25</td>
    <td>
      <abbr title="beijing">bj</abbr>
    </td>
    <td>ballroom</td>
  </tr>
  <tr>
    <td>2017-08-02</td>
    <td>
      <abbr title="shanghai">sh</abbr>
    </td>
    <td>yoyoyo</td>
  </tr>
  <tr>
    <td>2017-11-30</td>
    <td>
      <abbr title="hangzhou">hz</abbr>
    </td>
    <td>now~</td>
  </tr>
  <tr>
    <td>2017-11-30</td>
    <td>
      <abbr title="hangzhou">hz</abbr>
    </td>
    <td>now~</td>
  </tr>
  <tr>
    <td>2017-11-30</td>
    <td>
      <abbr title="shijiazhuang">sjz</abbr>
    </td>
    <td>now~</td>
  </tr>
  </tbody>
</table>

script.js

function addclass(element, value) {//element:需要添加新样式的元素，value：新的样式
  if (!element.classname) {
    element.classname = value;
  } else {
    newclassname = element.classname;
    newclassname += " ";
    newclassname += value;
    element.classname = newclassname;
  }
}
function stripetable(){
  if(!document.getelementsbytagname("table")) return false;
  /*获取table*/
  var table = document.getelementsbytagname("table");
  /*遍历 为所有表格添加*/
  for(var i=0;i<table.length;i++){
    /*判断是否为奇数行
    * 将第一行设置成true
    * */
    var odd = true;
    var tr = table[i].getelementsbytagname("tr");
    /*遍历表格中的每一行*/
    for(var j=0;j<tr.length;j++){
      if(odd){
        addclass(tr[j],"stripe");
        /*将下一行设置称false*/
        odd = false;
      }else{
        /*将下一行设置称true*/
        odd = true;
      }
    }
  }
}

css部分：

* {
  margin: 0;
  padding: 0;
}
.stripe{
  background-color: #eee;
}

完整index.html代码如下：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>javascript斑马线表格</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }
    .stripe{
      background-color: #eee;
    }
  </style>
<script src="script.js"></script>
</head>
<body>
<table>
  <thead>
  <tr>
    <th>date</th>
    <th>city</th>
    <th>venue</th>
  </tr>
  </thead>
  <tbody>
  <tr>
    <td>2017-06-25</td>
    <td>
      <abbr title="beijing">bj</abbr>
    </td>
    <td>ballroom</td>
  </tr>
  <tr>
    <td>2017-08-02</td>
    <td>
      <abbr title="shanghai">sh</abbr>
    </td>
    <td>yoyoyo</td>
  </tr>
  <tr>
    <td>2017-11-30</td>
    <td>
      <abbr title="hangzhou">hz</abbr>
    </td>
    <td>now~</td>
  </tr>
  <tr>
    <td>2017-11-30</td>
    <td>
      <abbr title="hangzhou">hz</abbr>
    </td>
    <td>now~</td>
  </tr>
  <tr>
    <td>2017-11-30</td>
    <td>
      <abbr title="shijiazhuang">sjz</abbr>
    </td>
    <td>now~</td>
  </tr>
  </tbody>
</table>
<script>
stripetable();
</script>
</body>
</html>

更多关于javascript相关内容感兴趣的读者可查看本站专题：《javascript表格(table)操作技巧大全》、《javascript操作dom技巧总结》、《javascript遍历算法与技巧总结》、《javascript数学运算用法总结》、《javascript数据结构与算法技巧总结》、《javascript查找算法技巧总结》及《javascript错误与调试技巧总结》

希望本文所述对大家javascript程序设计有所帮助。

上一篇： 详解nodejs中express搭建权限管理系统

下一篇： 信息滚动效果的实例讲解

推荐阅读