Ask and Learn

隔行变色(JS+CSS) 高级

目录

隔行变色(JS+CSS) 高级

[隔行变色(JS+CSS)][m2]存在的问题:

  • 只能对指定的一个列表进行渲染,不能重用
  • 不能指定变色的起始位置,在处理表格的变色时,得专门写处理
  • 代码全在 onload 事件中,对页面的依赖太高

将其代码进行改进并移入到一个单独的函数中去:

/**
 * 此方法用于列表的隔行变色效果,可以灵活得为指定ID的列表指定隔行的颜色。
 *
 * @param id 列表的id
 * @param item 要变色的行的标签
 * @param odd 奇数行的样式类名,如果不指定,则默认为odd
 * @param even 偶数行的样式类名,如果不指定,则默认为even
 * @param start 开始变色的行的索引,如果不指定,则默认为0
 * @param end 结束变色的行的索引,如果不指定,则默认为列表长度
 */
function rowRender(id, item, odd, even, start, end) {
    // 获取列表容器
    var list = document.getElementById(id);
    // 获取列表
    var items = list.getElementsByTagName(item);

    // 修正初始位置,如果不是一个数字或者越界,则从0开始
    if (isNaN(start) || (start < 0 || start >= items.length)) {
        start = 0;
    }

    // 修正结束位置,如果不是一个数字或者越界,则为列表末尾
    if (isNaN(end) || (end < start || end >= items.length)) {
        end = items.length;
    }

    // 如果没有指定odd,则默认为'odd'
    odd  = odd  || 'odd';
    // 如果没有指定even, 则默认为'even'
    even = even || 'even'; 

    // 遍历列表并渲染效果
    for (var i = start; i < end; i++) {
        var className = ' ' + ((i % 2 == 0) ? odd : even);
        items[i].className += className;
    }
}

用法:

window.onload = function() {
    // 渲梁list1下所有的li标签,使用默认的样式和起始位置
    rowRender('list1', 'li');

    // 渲梁list2下所有的li标签,使用指定的odd和默认的even,使用指定的起始位置
    rowRender('list2', 'li', 'odd1', null, 2, 6);

    // 渲梁table1下所有的tr标签,使用指定的odd和even,使用默认的起始位置
    rowRender('table1', 'tr', 'tr-odd', 'tr-even');
    // 渲梁table2下所有的tr标签,使用指定的odd和even,使用指定的起始位置
    rowRender('table2', 'tr', 'tr-odd', 'tr-even', 1);
}

示例:

List 1

rowRender('list1', 'li');

  • Item 1
  • Item 2
  • 001 data1 002 data2 003 data3 004 data4 005 data5 006 data6 007 data7 008 data8 009 data9 0010 data10 0011 data11

    Table 2

    rowRender('table1', 'tr', 'tr-odd', 'tr-even', 1);

    ID DATA
    001 data1
    002 data2
    003 data3
    004 data4
    005 data5
    006 data6
    007 data7
    008 data8
    009 data9
    0010 data10
    0011 data11