当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JavaScript实现的斑马线表格效果【隔行变色】

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

2017年12月12日  | 移动技术网IT编程  | 我要评论

本文实例讲述了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;
}

完整代码如下：

<!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程序设计有所帮助。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网