如何在Rails 3中使用javascript正确替换html行的颜色？
[英]How to properly alternate the color of html row using javascript in Rails 3?
问题描述
I have successfully put highlighting in my table but the problem is with alternating the row color. 
我已经成功地在表格中添加了高亮显示，但是问题是交替使用行颜色。 The row color is alternating only after the row is highlighted. 仅在突出显示行后，行颜色才会交替显示。 In other words, when the page is first loaded or refreshed, all the row color is colored white which is the default. 换句话说，当第一次加载或刷新页面时，所有行颜色均为白色，这是默认设置。 I want to fix this in a way that whether its first time loading the page or it is refreshed the color is already alternating. 我想以某种方式解决此问题，无论是第一次加载页面还是刷新页面，颜色已经交替出现。 By the way, I used a combo of JavaScrpt, and embedded ruby for this. 顺便说一句，我为此使用了JavaScrpt和嵌入式ruby的组合。
Here is the code fragment for my index.html.erb : 这是我的index.html.erb的代码片段：
<table id="table_list">
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='<%= cycle :odd, :even %>'">
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
</table>
and on my CSS: 在我的CSS上：
<pre>
#table_list{
border: solid 1px #666;
border-collapse: collapse;
margin: 10px 0;
}
#table_list th{
font-size: 12px;
color: #FFF;
background-color: #404C99;
padding: 4px 8px;
padding-bottom: 4px;
text-align: left;
}
#table_list .highlight {
background-color: yellow;
}
#table_list td {
font-size: 12px;
padding: 2px 6px;
}
#table_list .even td {
background-color: #E3E6FF;
}
#table_list .odd td {
background-color: #D1D8F6;
}
</pre>
6 个解决方案
解决方案1
3 2011-04-07 04:52:48
You don't need the onmouseout. 您不需要onmouseout。 use the css: 使用CSS：
tr:hover {
background-color: yellow;
}
instead. 代替。 Then in your table: 然后在您的表中：
<table id="table_list">
<tr class="<%= cycle('odd', 'even') %>">
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
</table>
if you want it compatible to IE(I believe :hover doesn't work on non anchor elements in IE), you can use JS(or jquery to do the hover for you. 如果您希望它与IE兼容（我相信：hover不适用于IE中的非锚元素），则可以使用JS（或jquery来为您做悬停）。
解决方案2
1 2012-06-25 20:29:32
This task got a lot simpler with CSS3, which added the :nth-child() pseudo-selectors. CSS3简化了此任务，它添加了：nth-child（）伪选择器。
tr:nth-child(even) {
background-color: #E3E6FF;
}
tr:nth-child(odd) {
background-color: #D1D8F6;
}
Now you don't need to set a class for your table rows, just to style even and odd rows separately. 现在，您无需为表行设置类，只需分别设置偶数和奇数行的样式即可。 So no need for Rails or JQuery calls for that, and the CSS solution automatically handles changes to the table structure. 因此，不需要Rails或JQuery调用，CSS解决方案将自动处理对表结构的更改。
解决方案3
1 2011-04-07 04:21:50
Set the starting class. 设置开始课程。
<table id="table_list">
<tr class='<%= cycle :even, :odd %>' onMouseOver="this.className='highlight'" onMouseOut="this.className='<%= cycle :odd, :even %>'">
<td> Data 1 </td>
<td> Data 2 </td>
</tr>
</table>
解决方案4
1 已采纳 2011-04-07 05:19:24
Here you can use JQuery for this coloring purpose. 在这里，您可以使用JQuery进行着色。
You might find the :even and :odd selectors useful. 您可能会发现：even和：odd选择器很有用。
You could then use them like this (Working Copy): 然后，您可以像这样使用它们（工作副本）：
Your can download jquery from jquery.com 您可以从jquery.com下载jquery
<style>
#table_list .even td
{
background-color: #E3E6FF;
}
#table_list .odd td
{
background-color: #D1D8F6;
}
#table_list td.hover
{
background-color: green !important;
}
</style>
<script language="javascript">
$(document).ready(function() {
$('#table_list').find('tr>td').hover(function() {
//$(this).css("background-color", "green");
$(this).addClass('hover');
}, function() {
//$(this).css("background-color", "inherit");
$(this).removeClass('hover');
});
$('#table_list tr:even').addClass('even');
$('#table_list tr:odd').addClass('odd');
});
</script>
<body>
<form id="form2">
<div>
<table id="table_list">
<tr>
<td>
1
</td>
<td>
Babu
</td>
</tr>
<tr>
<td>
2
</td>
<td>
Satheesh
</td>
</tr>
<tr>
<td>
3
</td>
<td>
Ramesh
</td>
</tr>
<tr>
<td>
4
</td>
<td>
Venki
</td>
</tr>
<tr>
<td>
5
</td>
<td>
Abhishek
</td>
</tr>
</table>
</div>
</form>
解决方案5
1 2011-04-07 06:21:59
Use jQuery's nth-child . 使用jQuery的nth-child 。 Assuming we want to alternate between li tags, we do the following. 假设我们要在li标签之间切换，请执行以下操作。
$('#test li:nth-child(odd)').addClass('odd');
You can do the same for your td's or any other element. 您可以对td或其他任何元素执行相同的操作。
Check working example at http://jsfiddle.net/T4Ywt/1/ 在http://jsfiddle.net/T4Ywt/1/中查看工作示例
解决方案6
1 2011-04-07 07:33:28
@johan, the reason your code doesn't work is because the Ruby code that does the cycling between odd and even is only run once , when the page is loaded. @johan，您的代码无法正常工作的原因是，加载页面时，在奇数和偶数之间循环的Ruby代码仅运行一次 。 If you load index.html and then look at the source for it in your browser you'll see something like: 如果您加载index.html ，然后在浏览器中查看其源代码，则会看到类似以下内容的内容：
...
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='odd'">
...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.