JavaScript implementation of zebra crossing table example sharing

Although there are many frameworks that can easily achieve the zebra crossing effect, and the compatibility is also very good, such as bootstrap, it is undeniable that the implementation using JavaScript is the most compatible (except for browsers that do not support or prohibit JavaScript scripts) ), so today I used native JS to implement a table with a zebra crossing effect. You can take a brief look at it, and save it for script accumulation if necessary. This article mainly introduces the zebra crossing table effect realized by JavaScript. It uses JavaScript to traverse and operate the table table to realize the interlaced color changing function. It is very simple and practical. Friends who need it can refer to it. I hope it can help you.

html table part:

<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 part:

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

The complete index.html code is as follows:

  
  
  



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

Related recommendations:

jquery Simple method to realize interlaced color change

JS control table interlaced color change implementation code display

JS example code sharing for realizing interlaced line color change effect on list page

The above is the detailed content of JavaScript implementation of zebra crossing table example sharing. For more information, please follow other related articles on the PHP Chinese website!