javascript和JQuery焦点图和代码特效大全
当前最流行的开源CMS网站系统大全
当前位置:首页 > WEB前端 > JavaScript > 

原生JavaScript实现斑马线表格

来源:IT技术网编辑:雨天发布于:2017-07-10人围观

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

index.html

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<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

?
1
2
3
4
5
6
7
function stripeTable(){
    if(!document.getElementsByTagName("table")) return false;
 
    /*获取table*/
    var table = document.getElementsByTagName("table");
    /*遍历  为所有表格添加*/
    for(var i=0;i<table.length;i++){ j="0;j<tr.length;j++){" odd="true;" pre="" tr="table[i].getElementsByTagName("tr");" true="" var=""></table.length;i++){>
 

与相关的文章
有时间的话来看看IT界的突发事件