js 如何设置奇数行和偶数行的背景颜色?
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js 如何设置奇数行和偶数行的背景颜色?相关的知识，希望对你有一定的参考价值。
使用jquery的伪类选择器，例如$("选择器 :odd").css("background","#0f0");//奇数行
$("选择器 :even").css("background","#ff0");//偶数行
若是用原生js就要判断，例如
for(var i = 0; i < 元素行数; i++)
if(i%2 == 0)
//奇数行代码
else
//偶数行代码
而且用css也可以添加奇偶数行的样式，例如元素为tr的奇偶设置
tr:nth-child(odd)background:#0f0;
tr:nth-child(even)background:#ff0;
nth-of-type伪类选择器也能实现此效果。 参考技术A <html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=utf-8" />
<title>javascript
practice</title>
<script type="text/javascript"
src="jquery-1.8.0.min.js"></script>
<style type="text/css">
tablewidth:300px;
captionbackground:#DCA;
thbackground:#FCA;width:50%;
tdtext-align:center;
</style>
<script type="text/javascript">
$(document).ready(function()
odd= "background":"#EDA","color":"#3F5";//奇数样式
even="background":"#2DA","color":"#875";//偶数样式
odd_even("#table_test",odd,even);
);
function
odd_even(id,odd,even)
$(id).find("tr").each(function(index,element)
if(index%2==1)
$(this).css(odd);
else
$(this).css(even);
);
</script>
</head>
<body>
<table
id="table_test">
<caption>标题<caption>
<tr>
<th>name</th>
<th>age</th>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>张</td>
<td>李</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr></li>
</body>
</html>
自己试试就知道了
用JS文件如何设置奇数表格行背景和偶数表格行背景
参考技术A 您好.应该不是用JS把,是CSS把
在网站风格里面。找到
.listbg
和
listbg2
修改下里面CSS.
(如果换颜色，直接改颜色代码.如果换图片背景.就改为图片的url
正常情况,就出现奇数表格行背景和偶数表格行背景,
记得我曾经碰见不显示的，在插入标签时候。
在下面的
两个CSS风格里面输入框,输入listbg
和
listbg2.
这样，奇数行显示
listbg
的CSS
,偶数行显示
listbg2
的CSS.
如果还有问题，可以继续追问，感谢。
以上是关于js 如何设置奇数行和偶数行的背景颜色?的主要内容，如果未能解决你的问题，请参考以下文章
c#里wpf下怎么设置dataGrid的奇数行和偶数行各为一种颜色？比如this.dataGrid.后面加啥属性进行设置？