js实现表格隔行变色,滑动变色,点击变色,配合jquery也行 求代码啊!!!!

JavaScript020

js实现表格隔行变色,滑动变色,点击变色,配合jquery也行 求代码啊!!!!,第1张

var rowIndex = -1 //选中行下标

var colorIndex //选中行原背景色

var bgcolor //临时储存当前行原先的颜色

var color1 = "#CFDFFF" //交叉颜色1

var color2 = "#EFEFFF" //交叉颜色2

var onColor = "#FFEFBF" //鼠标行颜色

var selectColor = "#FFBFFF" //选中行颜色

window.onload = function () {

    updateColor("tb", 1)

}

//参数(表格ID,跳过多少行头)

function updateColor(id, passRow) {

    var tb = document.getElementById(id)

    for (var i = passRow i < tb.rows.length i++) {

        var row = tb.rows[i]

        row.onmouseover = function () {

            bgcolorOver(this)

        }

        row.onmouseout = function () {

            bgcolorOut(this)

        }

        row.onclick = function () {

            rowClick(this)

        }

        if (i % 2 == 0) {

            row.style.backgroundColor = color1

        } else {

            row.style.backgroundColor = color2

        }

    }

}

function bgcolorOver(obj) {

    if (rowIndex == obj.rowIndex) {

        return

    }

    bgcolor = obj.style.backgroundColor

    obj.style.backgroundColor = onColor

}

function bgcolorOut(obj) {

    if (rowIndex == obj.rowIndex) {

        return

    }

    obj.style.backgroundColor = bgcolor

}

function rowClick(obj) {

    if (rowIndex != obj.rowIndex) {

        if (rowIndex != -1) {

            tb.rows[rowIndex].style.backgroundColor = colorIndex

        }

        rowIndex = obj.rowIndex

        colorIndex = bgcolor

        obj.style.backgroundColor = selectColor

    }

} <table style="width:300px" id="tb"> 

<tr> 

<td>1</td><td>A</td><td>a</td> 

</tr> 

<tr> 

<td>2</td><td>B</td><td>o</td> 

</tr> 

<tr> 

<td>3</td><td>C</td><td>e</td> 

</tr> 

</table>

var list = document.getElementsByTagName("ul") // 查找所有ul

var len = list.length

for (j = 0 j < len j++) {

    if (list[j].className != 'list') {

        // 如果ul的className不是list

        // 那么执行下一次循环

        continue

    }

    var li = list[j].children // ul下的li

    var liLen = li.length

    for (i = 0 i < liLen i++) {

        if (i % 2 == 0) {

            li[i].className = "list1"

        } else {

            li[i].className = "list2"

        }

    }

}