Javascript实现表格中隔行变色，与jQuery方式的对比-白红宇的个人博客

发布日期：2021-05-06 21:11:23 浏览次数：27 分类：原创文章

本文共 2170 字，大约阅读时间需要 7 分钟。

Javascript方式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        table {            border-collapse: collapse;            border: 1px solid black;            width: 30%;            text-align: center;        }        th,td {            border: 1px solid black;        }    </style>    <script>        window.onload = function () {            var trs = document.getElementsByTagName('tr');            for (let i=0;i<trs.length;i++)            {                if((i % 2) == 0)                {                    var obj = trs[i];                    obj.style.backgroundColor = '#cccccc';                }            }        }    </script></head><body>    <table>        <tr>            <th>1</th>            <th>2</th>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>    </table></body></html>

jQuery方式：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style type="text/css">        table {            border-collapse: collapse;            border: 1px solid black;            width: 30%;            text-align: center;        }        th,td {            border: 1px solid black;        }    </style>    <script src="../js/jquery-3.5.1.js"></script>    <script>        $(document).ready( function () {            $("tr:even").css("background-color","#cccccc");        })    </script></head><body>    <table>        <tr>            <th>1</th>            <th>2</th>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>        <tr>            <td>1</td>            <td>2</td>        </tr>    </table></body></html>

上一篇：JavaScript简介-JavaScript入门基础（001）

下一篇：JavaScript广告图片跟随滚动

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章