jq之$(“tr:odd“).css(“background-color“,“red“)；

最新推荐文章于 2022-08-25 23:22:41 发布

原创最新推荐文章于 2022-08-25 23:22:41 发布 · 447 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jq

java基础同时被 2 个专栏收录

124 篇文章

订阅专栏

前端

35 篇文章

订阅专栏

这篇博客展示了如何使用jQuery选择器`tr:odd`和`css()`方法来给HTML表格的奇数行设置红色背景。通过在文档加载完成后绑定点击事件到按钮，当点击按钮时，所有奇数行的表格行将变为红色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jq之demo</title>
    <!--线上jq库-->
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                /*$("tr:odd")奇数位置的tr元素*/
                $("tr:odd").css("background-color","red");
            });
        });
    </script>
</head>
<body>
<h1>主页</h1>
<table border="1">
    <tr>
        <th>网站名</th>
        <th>网址</th>
    </tr>
    <tr>
        <td>百度</td>
        <td>https://www.baidu.com/?tn=40020637_4_oem_dg</td>
    </tr>
    <tr>
        <td>b站</td>
        <td>https://www.bilibili.com/</td>
    </tr>
    <tr>
        <td>csdn</td>
        <td><a href="https://blog.youkuaiyun.com/wanggang182007">无名csdn</a></td>
    </tr>
    <tr>
        <td>github</td>
        <td>https://github.com/trending/java?since=monthly</td>
    </tr>
    <tr>
        <td>gitee</td>
        <td>https://search.gitee.com/?skin=rec&type=repository&q=%E7%94%B5%E5%95%86</td>
    </tr>
</table>
<button>点我<button/>
</body>
</html>