这篇博客介绍了如何使用JQuery操作DOM，特别是在表格（table）上应用动态样式。通过mouseover和mouseout事件，实现了鼠标悬停时添加和移除class的效果，同时也展示了点击行触发颜色变化的功能。此外，还涵盖了添加alt、odd、last等类，以及通过click事件实现的行显示和隐藏的交互效果。
本例子操作的table表的class为stripe
//将dom对象转换成jquery对象
$(document).ready(
function() {
//如果鼠标移到class为stripe的表格的tr上时，执行函数
$(".stripe tr").mouseover(function() {
$(this).addClass("over");
});
//给这行添加class值为over，并且当鼠标一出该行时执行函数
$(".stripe tr").mouseout(function() {
$(this).removeClass("over");
});
//点击变色,注意：因为有隔行变色，所以这里必须在触发toggleClass时,remove("alt").
//$(".stripe tr").click(function() { //移除该行的class
// $(this).toggleClass("click");
// $(this).removeClass("alt");
//});
//给class为stripe的表格的所有行添加class值为alt
$(".stripe tr").addClass("alt");
//给class为stripe的表格的偶数行添加class值为odd
//$(".stripe tr:even").addClass("odd");
//给class为stripe的表格的奇数行添加class值为alt
/
最低0.47元/天 解锁文章
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
