使用JQuery完成表格的隔行换色
程序员文章站
2022-06-24 10:14:08
使用JQuery完成表格的隔行换色 Js相关技术 获得所有的行 table.rows[] 修改行的颜色 row.bgColor ="red" row.style.backgroundColor = "black" row.style.background = "red" "bac ......
使用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"
步骤分析
- 导入jq的包
- 文档加载完成函数: 页面初始化
- 获得所有的行 : 元素选择器
- 根据行号去修改颜色
代码实现
<!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>
上一篇: 浅谈golang 的高效编码细节
下一篇: 华为p50对比华为mate30哪个好?