집 > 기사 > 웹 프론트엔드 > 얼룩말 교차 테이블 예제 공유의 JavaScript 구현

얼룩말 교차 테이블 예제 공유의 JavaScript 구현

小云云원래의: 2018-02-09 14:10:291771검색

얼룩말 교차 효과를 쉽게 구현할 수 있는 프레임워크가 많고, 부트스트랩 등 호환성도 매우 좋지만, JavaScript를 사용한 구현이 가장 호환성이 좋은 것은 부인할 수 없습니다(JavaScript를 지원하지 않거나 금지하는 브라우저 제외). scripts) 그래서 오늘은 기본 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 코드는 다음과 같습니다.




  
  javascript斑马线表格
  



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

얼룩말 교차 테이블 예제 공유의 JavaScript 구현

관련 기사