如何在Rails 3中使用javascript正确地替换html行的颜色

我已经成功地在我的表中突出显示，但问题是交替行颜色。只有在行高亮显示后，行颜色才会交替。在换句话说，当页面第一次加载或刷新时，所有行颜色都是默认的白色。我想解决这个问题的方式，无论是它的第一次加载页面或它是刷新颜色已经交替。顺便说一下，我使用了javascript和嵌入式ruby的组合。

这是我的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>

和在我的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>

您不需要onmouseout。使用css:

tr:hover {
  background-color: yellow;
}

。然后在您的表中:

<table id="table_list">
  <tr class="<%= cycle('odd', 'even') %>">
    <td> Data 1 </td>
    <td> Data 2 </td>
  </tr>
</table>

如果你想让它兼容IE(我相信:悬停不工作的非锚元素在IE)，你可以使用JS(或jquery为您做悬停

这里您可以使用JQuery来实现这种着色目的。

你可能会发现:even和:odd选择器很有用。

你可以这样使用它们(工作副本):

你可以从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>

设置起始类

<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>

使用jQuery的第n个子元素。假设我们希望在li标记之间交替使用，可以执行以下操作。

$('#test li:nth-child(odd)').addClass('odd');

您可以对td或任何其他元素执行相同的操作。

查看工作示例http://jsfiddle.net/T4Ywt/1/

@johan，您的代码不起作用的原因是，在奇数和偶数之间进行循环的Ruby代码只在加载页面时运行一次。如果你加载index.html然后在浏览器中查看它的源代码你会看到如下内容:

...
 <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='odd'">
...

这个任务在CSS3中变得简单了很多，CSS3添加了:n -child()伪选择器。

tr:nth-child(even) {
    background-color: #E3E6FF; 
}
tr:nth-child(odd) {
    background-color: #D1D8F6; 
}

现在您不需要为您的表行设置一个类，只需要分别为偶数行和奇数行设置样式。因此不需要Rails或JQuery调用，CSS解决方案自动处理对表结构的更改。

查看工作示例http://jsfiddle.net/T4Ywt/1/

相关内容

最新更新

热门标签：