表格各行换色

最新推荐文章于 2023-10-22 21:06:40 发布

xdwangiflytek

最新推荐文章于 2023-10-22 21:06:40 发布

阅读量106

点赞数

分类专栏： Js/jQuery Utils 文章标签：表格各行换色

Js/jQuery 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

Utils

12 篇文章 0 订阅

订阅专栏

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>各行换色</title>
    <script type="text/javascript">
        function show() {
            var tab = document.getElementById("tab");
            var tr = tab.getElementsByTagName("tr");
            for (var i = 0; i < tr.length; i++) {
                if (i % 2 == 0) {
                    tr[i].style.backgroundColor = "#ccc";
                    tr[i].onmouseover = function () { this.style.background = "red" };
                    tr[i].onmouseout = function () { this.style.background = "#ccc" }
                } else {
                    tr[i].style.backgroundColor = "#fff";
                    tr[i].onmouseover = function () { this.style.background = "red" };
                    tr[i].onmouseout = function () { this.style.background = "#fff" }
                }
            }
        }
        window.onload = show;
    </script>
</head>
<body>
    <table id="tab">
        <tr>
            <td>
                11111111111
            </td>
            <td>
                22222222222
            </td>
        </tr>
        <tr>
            <td>
                33333333333
            </td>
            <td>
                44444444444
            </td>
        </tr>
        <tr>
            <td>
               555555555555
            </td>
            <td>
                66666666666
            </td>
        </tr>
        <tr>
            <td>
                77777777777
            </td>
            <td>
                88888888888
            </td>
        </tr>
        <tr>
            <td>
                99999999999
            </td>
            <td>
                00000000000
            </td>
        </tr>
    </table>
</body>
</html>

运行效果：

//update by 2012-11-26

唉，看了上面的JS，简直是一坨啊，附上一个JQuery的写法吧

$(function(){
		//各行换色
		$("tr:even").addClass("grey"); 
		$(".list").find("tr").mouseover(function(){
			  $(this).removeClass("grey");
			  $(this).addClass("select");
		});
		$(".list").find("tr").mouseout(function(){
			  $(this).removeClass("select");
			  $("tr:even").addClass("grey"); 
		});
	});