Tag标签 | 收藏本站 | 设为首页 | 参考书籍 | web前端技术交流①群:WEB前端技术交流群 会员登录 | 会员注册

首页文字描述

会员投稿 RSS订阅 专注web前端: 要么读书、要么旅行,身体和精神必须要有一个在路上。【每天一小步,成功一大步】
搜索: 您的位置主页 > WEB前端 > 网页特效 > jQuery表格效果(隔行换色、滑过变色、单选/双选效果)
隐藏/显示侧边栏

jQuery表格效果(隔行换色、滑过变色、单选/双选效果)

2013-10-09 10:23    来源:http://www.cgner.com    责任编辑:程管网    字号【
jQuery表格效果(隔行换色、滑过变色、单选/双选变色等效果)Jquery、JS练习,熟悉DOM操作、事件处理。DIV+CSS的结合操作。

01案例:隔行换色;滑动变色;点击变色,再次点击默认;
02案例:隔行换色;滑动变色;点击变色,再次点击默认,多选变色
03案例:隔行换色;滑动变色;点击变色,再次点击默认,都选多变色
效果如下图:

Jquery表格效果、隔行换色、滑过变色、单选/双选

Jquery代码如下:

$(document).ready(function(){
//所有demo_table隔行换色,高亮显示
$("tbody tr:even").addClass("even");
$("tbody tr:odd").addClass("odd");
//Demo1 鼠标经过高亮、单击变色
$(".demo01 tbody tr").hover(
  function(){ $(this).addClass("highlight"); },
  function(){ $(this).removeClass("highlight");
    }).click(function(){
     $(this).toggleClass("selected");
    });

//demo2 案例
$(".demo02 input[type='radio']:checked").parents("tr").addClass("selected");
$(".demo02 tbody tr").hover(
  function(){
   $(this).addClass("highlight");
  },
  function(){
   $(this).removeClass("highlight");
  }
);

$(".demo02 tbody tr").click(function(){
  $(this).addClass("selected").siblings().removeClass("selected");
  $(this).find("input").prop("checked",true);
});

//demo03 案例
$(".demo03 input[type='radio']:checked").parents("tr").addClass("selected");
$(".demo03 tbody tr").hover(
  function(){
   $(this).addClass("highlight");
  },
  function(){
   $(this).removeClass("highlight");
  }
);

$(".demo03 tbody tr").click(function(){
  if($(this).hasClass("selected")){
   $(this).removeClass("selected");
   $(this).find("input").removeProp("checked");
   }
  else{
   $(this).addClass("selected");
   $(this).find("input").prop("checked",true);
   }
});
});

本案例的演示地址单击此处: DEMO演示地址


更多
Tags 标签:
责任编辑:程管网
设为首页 | 加入收藏 | 关于我们| 版权声明 | 在线留言 | 网站地图 |