1、奇数行$(‘.q-t-list-01 a:odd‘).css( ‘background-color‘, ‘#f2f2f2‘)2、偶数行$(‘.q-t-list-01 a:even‘).css( ‘background-color‘, ‘#eee‘) 效果图 原文：https://www.cnblogs.com/chenshaoxiong/p/13279933.html
用JQuery实现表格隔行变色和突出显示当前行上源码<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <title>表格隔行背景和突出显示当前行</title> <script type="text/javascript" src="jquery-1.4.2.min.js"></script> <style type="text/css"> ...
表格隔行变色示例：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>表格隔行变色</title><style type="text/css">div, span, p {width: 140px;height: 140px;margin: 5px;background: #aaa;border: #000 1px solid;float: left;font-size: 17px;font-family: Verdana;}div.mini {width: 55px;height: 55px;background-color: #aaa;font-size: 12px;}div.hide {display: none;}#data {width: 600px;}#data, td...
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>选择器实现各行变色</title><link href="../../CSS/2-2.css" rel="stylesheet"/><script src="../../JQuery/jquery-1.4.2.min.js"></script><script type="text/javascript">$(function () {$("#tbStu tr:nth-child(even)").addClass("trOdd");})</script></head><body><table id="...
这次给大家带来jQuery插件实现表格隔行变色并且与鼠标进行交互，jQuery插件实现表格隔行变色并且与鼠标进行交互的注意事项有哪些，下面就是实战案例，一起来看一下。<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<ti...
这次给大家带来jQuery实现表格隔行变色与鼠标滑过高亮（附代码），jQuery实现表格隔行变色与鼠标滑过高亮的注意事项有哪些，下面就是实战案例，一起来看一下。此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"...
前端开发离不开jquery，jquery和JavaScript一样能实现很多功能，本文主要为大家详细介绍了实现jquery隔行变色效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。本文实例为大家分享了jquery隔行变色展示的具体代码，供大家参考，具体内容如下效果图代码<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script type="text/javascript" src="js/jquery-2.1.0.js"></scrip...
代码如下: jquery 奇偶变色 $(document).ready(function() { $('tr').addClass('odd'); $('tr:even').addClass('even'); //奇偶变色，添加样式 }); #hacker tr:hover{ background-color:red; //使用CSS伪类达到鼠标移入行变色的效果，比Jquery 的mouseover,hover 好用 } .odd { background-color: #ffc; /* pale yellow for odd rows */ } .even { background-color: #cef; /* pale blue for even rows */ } As You Li...
一些css的定义，可以根据需要自己选择。//显示单双行显示不同背景色【方法一】： // $("#UL_id li:even").attr("className","redClass"); //显示单双行显示不同背景色【方法二】： $("#UL_id li:even").addClass("redClass"); 单数 双数 双数 odd:单 even:双 jQuery 表格隔行变色代码li隔行换色改进版JS控制表格隔行变色
本文实例讲述了jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果的方法。分享给大家供大家参考，具体如下：
此插件旨在实现表格隔行变色，且鼠标移动在表格的某一行上时，该行能高亮显示。整体代码如下：表格隔行变色且鼠标滑过高亮显示table{border-collapse:collapse;border:none;width:20%;}
table tr td{border:1px solid #ccc;text-align:center;cursor:pointer;}
.evenRow{background:#f0f0f0;}
.oddRow{background:#ff0;}...
table HTMLElement效果 代码如下: var br_cc = (function(){ var setEffect = function(els,params){ var settings = {"c1":"#eee","c2":"#ccc","c3":"#f00"}; $.extend(settings,params); els.each(function(i){ var self = $(this); if(i%2==0){ this._bg = settings.c1; }else{ this._bg = settings.c2; } self.css({"background-color":this._bg,"cursor":"pointer"}); self.mouseover(function(){ self.css("background-color...
代码如下: 表格隔行背景和突出显示当前行 body{ margin:0 auto; font-size:12px;} .data_list td{ width:100px;} /* 当鼠标移到表格上是，当前一行背景变色 */ $(document).ready(function(){ $(".data_list tr td").mouseover(function(){ $(this).parent().find("td").css("background-color","#d5f4fe"); }); }) /* 当鼠标在表格上移动时，离开的那一行背景恢复 */ $(document).ready(function(){ $(".data_list tr td"...
1、JQuery选择器继承了CSS、path语音的部分语法，允许通过标签名、属性名、内容对DOM元素进行快速、准确的选择。 2、JQuery选择器与JavaScript相比，具有代码简单、完善的检测机制的优势。 3、使用JQuery选择器实现隔行变色，示例代码如下： 代码如下: 使用JQuery实现隔行变色 body{font-size:12px;text-align:center} #tbStu{width:260px;border:solid 1px #666;background-color:#eee} #tbStu tr{line-height:23px} #...
1、功能需求：表格中数据隔行变色、删除数据、全选删除、鼠标移动到图片时显示图片预览 2、示例代码如下： 代码如下: 数据管理 body{font-size:12px} table{width:360px;border-collapse:collapse} table tr th,td{border:solid 1px #666;text-align:center} table tr td img{border:solid 1px #ccc;padding:3px;width:42px;height:60px;cursor:hand} table tr td span{float:left;padding-left:12px} table tr th{ba...
代码如下: body { font-size:12px;text-align:center; } #tbStu { width:260px;border:1px solid #666;background-color:#eee; } #tbStu tr { line-height:23px; } #tbStu tr th { background-color:#ccc;color:#fff; } #tbStu .trOdd { background-color:#fff; } //普通JS写法 //window.onload = function () { // var oTb = document.getElementById('tbStu'); // for (var i = 0; i // if (i % 2) // { // oTb.rows[i].clas...
