100字范文 > jquery表格隔行变色

jquery表格隔行变色

时间：2024-02-20 11:21:58

相关推荐

jquery表格隔行变色

结果如下图:

<!doctype html><html><head><meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>薛之谦--歌曲--表格隔行变色</title><script type="text/javascript" src="js/jquery-3.2.1.js"></script><script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript">$(function(){//通过jQuery控制表格隔行换色，并鼠标悬停变色$('tr:even:gt(0)').addClass('tr_even'); //默认偶数行背景色，无视标题行用:gt(0)$('tr:odd').addClass('tr_odd'); //默认奇数数行背景色$('tr:gt(0)').mouseover(function(){$(this).addClass('tr_hover'); //通过jQuery控制实现鼠标悬停上的背景色，无视标题行用:gt(0)}).mouseout(function(){$(this).removeClass('tr_hover'); //通过jQuery控制实现鼠标悬停上的背景色}); });</script><style type="text/css">.headCls{background-color:#ccc;} /* 标题背景色 */.tr_even{background-color:#FFCCCC} /* 偶数行背景色 */.tr_odd{background-color:#FF6666} /* 奇数行背景色 */.tr_hover{background-color:#FFCC99} /* 鼠标悬停上的背景色 */</style></head><body><table border="1" width="100%" cellspacing="0" cellpadding="0"><tr><th>编号</th><th>歌曲名称</th><th>在线播放</th><th>点播计数</th></tr><tr><td>1</td><td>演员</td><td><a href=/n/yqq/song/001Qu4I30eVFYb.html>播放</a></td><td>111</td></tr><tr><td>2</td><td>丑八怪</td><td><a href=/n/yqq/song/000QwTVo0YHdcP.html>播放</a></td><td>222</td></tr><tr><td>3</td><td>刚刚好</td><td><a href=/n/yqq/song/001TXSYu1Gwuwv.html>播放</a></td><td>333</td></tr><tr><td>4</td><td>暧昧</td><td><a href=/n/yqq/song/003v4UL61IYlTY.html>播放</a></td><td>444</td></tr></table></body></html>

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。