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")