如何在Rails 3中使用jquery突出显示表行？

Question

我已在 Rails 3 测试应用程序中成功安装了 jquery-rails。我已经让它工作了。有人可以向我指出如何使我昨天从 Sreekumar 获得的 jquery 代码在我的 Rails 3 测试应用程序上工作吗？

这是 jquery 代码，我将其放在 application.js 上：

$(document).ready(function() {

        $('#table_list').find('tr>td').hover(function() {
            //$(this).css("background-color", "green");
            $('table_list').addClass('highlight');
        }, function() {
            //$(this).css("background-color", "inherit");
            $('table_list').removeClass('highlight');
        });
        $('#table_list  tr:even').addClass('even');
        $('#table_list tr:odd').addClass('odd');

});

此代码的目的是使表格行颜色交替并突出显示所选行。交替行颜色工作得很好，但是，突出显示不起作用。

这是 index.html.erb 中的 Rails 3 代码：

<h1>Listing Ninjas</h1>

<table id="table_list">
 <tr>
  <th>Name</th>
  <th>Rank</th>
  <th>Village</th>
  <th>Country</th>
  <th></th>
  <th></th>
 <th></th>
</tr>

<% @ninjas.each do |ninja| %>
 <tr>
  <td><%= ninja.name %></td>
  <td><%= ninja.rank %></td>
  <td><%= ninja.village %></td>
  <td><%= ninja.country %></td>
  <td><%= link_to 'Show', ninja %></td>
  <td><%= link_to 'Edit', edit_ninja_path(ninja) %></td>
  <td><%= link_to 'Destroy', ninja, :confirm => 'Are you sure?', :method => :delete %></td>
 </tr>
<% end %>
</table>

<br />

<%= link_to 'New Ninja', new_ninja_path %>

这是我的 css 代码，位于单独的文件 application.css：

#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;
}

所有 3 个代码都位于单独的文件中。

我对 Rails 和 jquery 有点陌生。我还是一个初学者。请耐心等待...

Answer 1

这可能无法回答您的问题，但是有一种更简单的方法来实现偶数/奇数颜色表，使用循环命令

 @items = [1,2,3,4]
  <table>
  <% @items.each do |item| %>
    <tr class="node <%= cycle("even", "odd") -%>">
      <td>item</td>
    </tr>
  <% end %>
  </table>

希望这向您介绍一个很酷的 Rails 实用程序

链接：将 Rails 3 转换为 Rails 2：带有块的助手

一次你可以向 tr 添加奇数/偶数，你不必使用 jquery 来实现这个目的，简单的 css 就足够了

.odd{
background-color:#cccccc;
}
.even{
background-color:#ffffff;
}
.node:hover{
background-color:#ff0000;
}

Answer 2

$(document).ready(function(){
    $("#table_list tr").mouseover(
        function() {
            $(this).addClass("highlight");
        }).mouseout(
        function() {
            $(this).removeClass("highlight");
        });
    $("#table_list tr:even").addClass("even");
        $("#table_list tr:odd").addClass("odd");
});

对于CSS：

#table_list .highlight {
 background-color: yellow;
}

#table_list .even {
 background-color: #E3E6FF;
}

#table_list .odd {
 background-color: #D1D8F6;
}

希望这有效^^