900字范文,内容丰富有趣,生活中的好帮手!
900字范文 > jQuery实现表格隔行变色案例

jQuery实现表格隔行变色案例

时间:2019-10-08 05:49:29

相关推荐

jQuery实现表格隔行变色案例

jQuery实现表格隔行变色案例

html结构js代码部分效果如图

其实挺简单的,思路就是,创建一个table,然后给偶数行和奇数行赋不同背景颜色。

html结构

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {margin: 0;padding: 0;}p {width: 50px;height: 50px;margin-bottom: 10px;}table {border-collapse: collapse;}td {width: 100px;height: 50px;}</style></head><body><table border="1"><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td><td></td></tr></table></body></html>

js代码部分

// jQuery的方法,给奇数行设置为绿色$("tr:even").css("background-color","yellowgreen")

效果如图

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。