Как выделить строку таблицы с помощью jquery в Rails 3? - PullRequest
Новая
       9

Как выделить строку таблицы с помощью jquery в Rails 3?

0 голосов
/ 08 апреля 2011

Я успешно установил jquery-rails в мое тестовое приложение rails 3.У меня уже было это работает.Может кто-нибудь, пожалуйста, укажет мне, как сделать этот код jquery, который я получил от Sreekumar вчера, для работы над моим тестовым приложением 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');

});

Цель этого кода - сделать цвет строки таблицы чередующимся и выделитьвыбранная строка.Чередование цвета строки работает отлично, однако подсветка не работает.

Вот код рельсов 3 в index.html.erb: 

<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.Я все еще новичок.Пожалуйста, будьте терпеливы ...

Ответы [ 2 ]

3 голосов
/ 08 апреля 2011

Это может не ответить на ваш вопрос, но есть гораздо более простой способ получения таблицы четных / нечетных цветов, используя команду цикла 

 @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;
}
1 голос
/ 08 апреля 2011 
$(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;
}

Надеюсь, что это работает ^^

...