JQuery表格高亮

来源：互联网发布：知乎删除自己的回答编辑：程序博客网时间：2024/05/10 19:00

经过一段时间对JS和JQuery的学习，自己写了一个表格高亮的例子。

HTML：

<!doctype html><html class="no-js"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>例子</title><script src="jquery-1.10.2.min.js"></script></head><body><table class="mytable"><tr><td>haohao</td><td>haohao</td><td>haohao</td><td><a href="#" data-toggle="popover" title="详情">查看</a></td></tr><tr class="even"><td>haohao</td><td>haohao</td><td>haohao</td><td><a href="#" data-toggle="popover" title="详情">查看</a></td></tr><tr><td>haohao</td><td>haohao</td><td>haohao</td><td><a href="#" data-toggle="popover" title="详情">查看</a></td></tr><tr class="even"><td>haohao</td><td>haohao</td><td>haohao</td><td><a href="#" data-toggle="popover" title="详情">查看</a></td></tr></table></body></html>

style：

* {padding:0;margin:0;}.mytable {border-collapse:collapse;}.mytable td {border:1px solid #ddd;padding:4px 10px;}.mytable .even {background-color:#eee;}.mytable .now {background-color:#ddd;}

JQuery：

$(function () {tableNow ();})function tableNow () {$('.mytable tr').mouseover(function () {var self = $(this);self.addClass('now').siblings().removeClass('now');})$('.mytable tr').mouseout(function () {var self = $(this);self.removeClass('now');})}

是不是很简单。