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++){
                    row.cells[j].style.backgroundColor = "#FFFFFF";
                }
            }else {
                for(var j = 0; j < len; j++){
                    row.cells[j].style.backgroundColor = "#F9F9F9";
                }
            }
        }
    }
}
/**
 * @param 带边框，隔行换色
 * @see 调用方法：在表格后面执行函数
 * @paraneter #EDEDED为表格边框颜色
 */
function setBorderColor(tableID) {
    var tab = document.getElementById(tableID);
    tab.border = "0";
    tab.cellpadding = "0";
    tab.cellspacing = "1";
    tab.style.background = "#EDEDED";
    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++){
                    row.cells[j].style.backgroundColor = "#FFFFFF";
                }
            }else {
                for(var j = 0; j < len; j++){
                    row.cells[j].style.backgroundColor = "#F9F9F9";
                }
            }
        }
    }
}
/**
 * @param 增加删除行,并求和
 * @see 调用方法：需要修改插入的表格代码
 * @paraneter tableID为表格ID或tbody的ID
 */
function createRow(tableID) {
    var tarTable = document.getElementById(tableID);
    var rowNum = tarTable.rows.length;
    var tr = new Array();
    var tr = tarTable.insertRow(tarTable.rows.length);
    var td;
    td = tr.insertCell(0);
    td.innerHTML = '<input id="t' + rowNum + '1" name="t1" type="text" value="0.00" onchange="calculateSum(\'' + tableID + '\', \'t' + rowNum + '1\', \'t' + rowNum + '2\', \'t' + rowNum + '3\')"/>';
    td = tr.insertCell(1);
    td.innerHTML = '<input id="t' + rowNum + '2" name="t2" type="text" value="0" onchange="calculateSum(\'' + tableID + '\', \'t' + rowNum + '1\', \'t' + rowNum + '2\', \'t' + rowNum + '3\')"/>';
    td = tr.insertCell(2);
    td.innerHTML = '<input id="t' + rowNum + '3" name="t3" type="text" value="0.00" disabled="disabled" />';
}
function deleterow(tableID) {
    var mtable = document.getElementById(tableID);
    if (mtable.rows.length > 1)
        mtable.deleteRow(mtable.rows.length - 1);
}
function calculateSum(tableID, _price, _count, _lall){
    var mtable = document.getElementById(tableID);
    var price = document.getElementById(_price);
    var count = document.getElementById(_count);
    var lall = document.getElementById(_lall);
    lall.value = price.value * count.value;
    var sum = parseInt(0);
    for(var i = 1; i < mtable.rows.length; i ++) {
        sum = sum + parseFloat(document.getElementById("t" + i + "3").value);
    }
    document.getElementById("sumPrice").value = sum;
}
/**
 * @param 隐藏、显示指定行
 * @see
 * @paraneter tableID
 */
function showIndexRow(tableID){
    var tab = document.getElementById(tableID);
    tab.rows[2].style.display = "block";
}
function hiddenIndexRow(tableID){
    var tab = document.getElementById(tableID);
    tab.rows[2].style.display = "none";
}