Как правильно чередовать цвет строки html, используя JavaScript в Rails 3? - PullRequest
Новая
       2

Как правильно чередовать цвет строки html, используя JavaScript в Rails 3?

1 голос
/ 07 апреля 2011

Я успешно разместил выделение в моей таблице, но проблема заключается в чередовании цвета строки.Цвет строки меняется только после выделения строки.Другими словами, когда страница загружается или обновляется впервые, весь цвет строки окрашивается в белый цвет, который используется по умолчанию.Я хочу исправить это так, чтобы при первой загрузке страницы или обновлении цвет уже чередовался.Кстати, я использовал комбо JavaScrpt и встроенный рубин для этого.

Вот фрагмент кода для моего 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: 

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

Ответы [ 6 ]

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

Вам не нужен 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 (я полагаю: hover не работает с элементами без привязки в IE), вы можете использовать JS (или jquery, чтобы сделать наведение длявы.

1 голос
/ 26 июня 2012

Эта задача стала намного проще с CSS3, который добавил псевдоселекторы: nth-child (). 

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

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

Теперь вам не нужно устанавливать класс для строк вашей таблицы, просто для того, чтобы стилизовать четные и нечетные строки отдельно. Так что для этого не нужны Rails или JQuery, а решение CSS автоматически обрабатывает изменения в структуре таблицы.

1 голос
/ 07 апреля 2011

@ johan, причина в том, что ваш код не работает, потому что код Ruby, который выполняет циклическое переключение между нечетным и четным, запускается только один раз , когда страница загружена.Если вы загрузите index.html, а затем посмотрите на источник в браузере, вы увидите что-то вроде: 

...
 <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='odd'">
...
1 голос
/ 07 апреля 2011

Используйте jQuery's nth-child . Предполагая, что мы хотим чередовать теги li, мы делаем следующее. 

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

Вы можете сделать то же самое для вашего тд или любого другого элемента.

Проверьте рабочий пример на http://jsfiddle.net/T4Ywt/1/

1 голос
/ 07 апреля 2011

Здесь вы можете использовать JQuery для этой раскраски.

Вы можете найти полезными селекторы: even и: odd.

Затем вы можете использовать их следующим образом (Рабочая копия):

Вы можете скачать jquery с jquery.com 

    <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>
1 голос
/ 07 апреля 2011

Установить начальный класс. 

<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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...