正文
jquery隔行变色,jquery表格隔行变色
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
隔行变色效果的jQuery怎么写？
取行数，分奇偶，每当是奇数时，这一行加淡灰色样式。还有就是事先定义好两种样式的行，通过判断迭代器的奇偶来显示对应样式的行。
相关问答
Q1: jquery隔行变色 跨行了怎么办啊!
!DOCTYPE HTML
html
head
meta charset="UTF-8" /
titleMODEL PAGE/title
style type="text/css"
TABLE {
border-collapse: collapse;
border: 1px solid black;
}
TD {
border: 1px solid black;
}
/style
script type="text/javascript" src="jquery-1.8.0.min.js"/script
script type="text/javascript"
$ (function ()
{
$ ('tr').css ("background-color", "red");
$ ('tr').each (function (i, dom)
{
var isRowSpan = $ (this).is (function ()
{
return $ ('td[rowspan]', this).length 0;
});
if (isRowSpan)
{
var count = $ (this).find ('td[rowspan]').prop ('rowspan');
$ (this).nextAll ('tr:lt(' + (count - 1) + ')').andSelf ().css ("background-color", "green");
}
});
});
/script
/head
body
table width="100%" border="1"
tr
thMonth/th
thSavings/th
thSavings for holiday!/th
/tr
tr
tdJanuary/td
td$100/td
td rowspan="3"$50/td
/tr
tr
tdFebruary/td
td$80/td
/tr
tr
tdFebruary/td
td$60/td
/tr
/table
/body
/html
Q2: 如何使用jQuery实现隔行变色效果
jQuery 选择器中，:even可以选择偶数行
示例如下
$("ul li").css("background","blue");
$("ul li:even").css("background","red");
Q3: jQuery实现表格隔行换色
本文实例为大家分享了jQuery实现表格隔行换色的具体代码，供大家参考，具体内容如下
!DOCTYPE
html
html
head
meta
charset="UTF-8"
title使用JQ完成表格隔行换色/title
script
src="js/jquery.min.js"/script
script
$(function()
{
$("tbody
tr:odd").css("background-color","aquamarine");
$("tbody
tr:even").css("background-color","bisque");
var
tb
=
$("tbody
tr");
var
oldColor;
for(var
i=0;itb.length;i++)
{
//alert(oldColor);
$("tbody
tr")[i].onmouseover
=
function()
{
oldColor
=
this.style.backgroundColor;
this.style.backgroundColor
=
"yellow";
}
$("tbody
tr")[i].onmouseout
=
function()
{
this.style.backgroundColor
=
oldColor;
}
}
});
/script
/head
body
table
id="tbl"
border="1"
border-collapse="collapse"
align="center"
cellspacing="0"
cellpadding="5"
width="400"
height="20"
thead
tr
th编号/thth姓名/thth年龄/th
/tr
/thead
tbody
tr
td1/tdtd张三/tdtd12/td
/tr
tr
td2/tdtd李四/tdtd22/td
/tr
tr
td3/tdtd王五/tdtd13/td
/tr
tr
td4/tdtd马六/tdtd14/td
/tr
tr
td5/tdtd伍六七/tdtd17/td
/tr
tr
td6/tdtd梅花十三/tdtd17/td
/tr
/tbody
/table
/body
/html
疑问：为什么this.style.backgroundColor
=
oldColor中的this不能用$("tbody
tr")[i]代替？？
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:jquery实现表格隔行换色效果jQuery插件实现表格隔行换色且感应鼠标高亮行变色使用jquery
hover事件实现表格的隔行换色功能示例基于Jquery的表格隔行换色，移动换色，点击换色插件
Q4: 如何让jquery输出的表格实现隔行变色
jQuery 选择器中，:even可以选择偶数行
示例如下
$("ul li").css("background","blue");
$("ul li:even").css("background","red");
