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

【问题标题】：How to highlight the table row using jquery in Rails 3?如何在 Rails 3 中使用 jquery 突出显示表格行？
【发布时间】：2011-04-08 02:59:21
【问题描述】：

我已在我的 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 有点陌生。我还是个初学者。请耐心等待...

【问题讨论】：

标签： jquery css ruby-on-rails-3 jquery-selectors

【解决方案1】：

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

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

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

链接：Converting Rails 3 to Rails 2: helpers with blocks

一旦你能够为 tr 添加奇数/偶数，你就不必为此目的使用 jquery 简单的 css 就足够了

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

【讨论】：

"> 是我的第一个解决方案。我不知道节点。它对我来说是新的，但我会尝试的。请您向我解释一下...

【解决方案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;
}

希望这行得通^^

【讨论】：