idea's blog

数据表格(datagrid)显示为一个表格, 为了让数据更加直观, 需要显示条纹. 条纹可以是按行的, 也可以是按列的. 如果关注的是行, 就使用前者, 如果关注的是列就使用后者.

表格条纹可以基于服务器端实现, 也可以基于客户端. 我个人倾向于基于客户端的方式, 因为这样功能划分更加清晰, 服务器端的代码更简洁. 基于客户端的方式使用 JavaScript 代码更改表格列(或者行)的样式属性. 本例是按行显示条纹, JS修改表格行(tr)的class属性. 也可以直接修改tr的style属性.

### JavaScript 代码:

function stripe(table) {
    var trs = table.getElementsByTagName("tr");
    for(var i=0; i<trs.length; i++){
        trs[i].className = i%2 != 0? 'odd' : 'even';
    }
}

window.onload = function(){
    var tables = document.getElementsByTagName('table');
    for(var i=0; i<tables.length; i++){
        if(tables[i].className == 'datagrid'){
            stripe(tables[i]);
        }
    }
}

### CSS 代码:

table.datagrid tr.odd{
    background: #fff;
}

table.datagrid tr.even{
    background: #eee;
}

链接: 示例演示

Related posts:

1. 用Javascript生成弹出窗口
2. JavaScript 类/函数继承最佳实践
3. JavaScript 设置浏览器标题闪动
4. JavaScript+jQuery两栏选择控件
5. SSDB与Redis命令对比