日期:2014-05-16  浏览次数:20450 次

table的js样式

今天不忙,总结点东东供大家参考:

/**
 * @param 无边框,隔行换色
 * @see 调用方法:在title中引入js文件,在表格后执行函数
 * @paraneter rowStart & colStart默认值为0
 */
function changeColorEachRow(tableID, rowStart, colStart){
    var tabTable = document.getElementById(tableID);
    if(tabTable.rows.length < rowStart){
        return false;
    }
    for(var i = rowStart; i < tabTable.rows.length; i ++){
        var row = tabTable.rows[i];
        var rowLength = row.cells.length;
        if(rowLength < colStart){
            return false;
        }
        if(i == parseInt(i / 2) * 2){
            for(var j = colStart; j < rowLength; j++){
                row.cells[j].style.backgroundColor = "#FFFFFF";
            }
        }else {
            for(var j = colStart; j < rowLength; j++){
                row.cells[j].style.backgroundColor = "#F9F9FA";
            }
        }
    }
}
/**
 * @param 鼠标的over、out、click的动作时显示不同的颜色
 * @see 调用方法:在tr里加入:
 *    onmouseover="colorMouseOver("test", this.rowIndex)"
 *    onmouseout="resetAllRowsColor("test")"
 *    onmousedown="colorMouseDown("test",this.rowIndex)"
 * @paraneter tarTable:tableID
 */
var finalRow = 1024;

function colorMouseDown(tarTable, rowID){
    finalRow = rowID;
    var tab = document.getElementById(tarTable);
    resetAllRowsColor(tarTable);
    var row = tab.rows[rowID];
    for(var i = 0; i < row.cells.length; i ++){
        row.cells[i].style.backgroundColor = "#7CC5E5";
    }
}
function colorMouseOver(tarTable, rowID){
    var tab = document.getElementById(tarTable);
    resetAllRowsColor(tarTable);
    if(finalRow == rowID){
    }else{
        var row = tab.rows[rowID];
        for(var i = 0; i < row.cells.length; i ++){
            row.cells[i].style.backgroundColor = "#F5F5F5";
        }
    }
}
function resetAllRowsColor(tarTable){
    var tab = document.getElementById(tarTable);
    for(var i = 0; i < tab.rows.length; i ++){
        if(finalRow == i){
        }else{
            var row = tab.rows[i];
            var len = row.cells.length;
            if(i == parseInt(i / 2) * 2){
                for(var j = 0; j < len; j++){
         &nbs