当前位置： 移动技术网 > IT编程>开发语言>Jquery > 使用JQuery完成表格的隔行换色

使用JQuery完成表格的隔行换色

2020年05月06日  | 移动技术网IT编程  | 我要评论

使用jquery完成表格的隔行换色

js相关技术

获得所有的行
​ table.rows[]

修改行的颜色
​ row.bgcolor ="red"
​ row.style.backgroundcolor = "black"
​ row.style.background = "red"
​ "background-color:red"
​ "background:red"

需求分析

在我们的实际开发过程中,我们的表格如果所有的行都是一样的话,很容易看花眼,所以我们需要让我们的表格隔行换色

技术分析

获取所有行 table.rows
遍历所有行
根据行号去修改每一行的背景颜色: bgcolor

​ style.backgroundcolor = "red"

步骤分析

  1. 导入jq的包
  2. 文档加载完成函数: 页面初始化
  3. 获得所有的行 : 元素选择器
  4. 根据行号去修改颜色

代码实现

	<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>title</title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script>
        $(function(){
            $("tr:even:gt(0)").css("background-color", "red")
            $("tr:odd").css("background-color", "yellow")
        });
    </script>
</head>
<body >
<table border="1px" width="600px" id="tab">
    <tr>
        <td>
            <input type="checkbox" checked="checked"/>
        </td>
        <td>分类id</td>
        <td>分类名称</td>
        <td>分类商品</td>
        <td>分类描述</td>
        <td>操作</td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>1</td>
        <td>手机数码</td>
        <td>华为,小米,尼康</td>
        <td>黑马数码产品质量最好</td>
        <td>
            <a href="#">修改</a>|<a href="#">删除</a>
        </td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>2</td>
        <td>成人用品</td>
        <td>充气的</td>
        <td>这里面的充气电动硅胶的</td>
        <td><a href="#">修改</a>|<a href="#">删除</a></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>3</td>
        <td>电脑办公</td>
        <td>联想,小米</td>
        <td>笔记本特卖</td>
        <td><a href="#">修改</a>|<a href="#">删除</a></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>4</td>
        <td>馋嘴零食</td>
        <td>辣条,麻花,黄瓜</td>
        <td>年货</td>
        <td><a href="#">修改</a>|<a href="#">删除</a></td>
    </tr>
    <tr>
        <td>
            <input type="checkbox"/>
        </td>
        <td>5</td>
        <td>床上用品</td>
        <td>床单,被套,四件套</td>
        <td>都是套子</td>
        <td><a href="#">修改</a>|<a href="#">删除</a></td>
    </tr>
</table>
</body>
</html>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网