#javascript #jquery #ruby-on-rails #css #html-table
#javascript #jquery #ruby-on-rails #css #html-таблица
Вопрос:
Я успешно разместил выделение в своей таблице, но проблема заключается в чередовании цвета строки. Цвет строки меняется только после того, как строка выделена. Другими словами, при первой загрузке или обновлении страницы весь цвет строки окрашивается в белый цвет, который используется по умолчанию. Я хочу исправить это таким образом, чтобы при загрузке страницы в первый раз или при ее обновлении цвет уже чередовался. Кстати, для этого я использовал комбинацию JavaScrpt и встроенного 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>
Ответ №1:
Вам не нужен 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 для выполнения наведения курсора за вас.
Ответ №2:
Здесь вы можете использовать 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>
Ответ №3:
Задайте начальный класс.
<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>
Комментарии:
1. то же самое… Я это уже пробовал… Он преобразует цвет фона в #D1D8F6. Он больше не чередуется.
2. Я не знаю синтаксиса Ruby, но предпосылка заключается в том, что вы хотите установить «class» равным тому, что установлено в onmouseout. Я предполагаю, что команда cycle теперь будет циклически повторяться дважды для каждой строки, в результате чего каждая строка будет иметь один и тот же класс и один и тот же (противоположный) onmouseout . Исправит ли это изменение одного из циклов путем переключения порядка? В противном случае вам, возможно, придется использовать решение javascript для сохранения класса строки, прежде чем устанавливать для него значение «выделить».
3. @johan, посмотри на созданный исходный код HTML / javascript, и ты поймешь, что происходит… всегда.
Ответ №4:
Используйте n-й дочерний элемент jQuery. Предполагая, что мы хотим чередовать теги li, мы делаем следующее.
$('#test li:nth-child(odd)').addClass('odd');
Вы можете сделать то же самое для вашего td или любого другого элемента.
Проверьте рабочий пример на http://jsfiddle.net/T4Ywt/1 /
Комментарии:
1. если вы можете использовать :nth-child(нечетный) для обозначения нечетных строк таблицы в CSS, то вам не нужно вызывать addClass(‘нечетный’). Проблема уже решена.
Ответ №5:
@johan, причина, по которой ваш код не работает, заключается в том, что код Ruby, который выполняет циклическое переключение между четным и нечетным, запускается только один раз, при загрузке страницы. Если вы загрузитесь index.html , а затем посмотрите на исходный код в своем браузере, вы увидите что-то вроде:
...
<tr onMouseOver="this.className='highlight'" onMouseOut="this.className='odd'">
...
Комментарии:
1. Да.. Это то, что я вижу… Как я собираюсь это исправить? Я пробовал другие ответы, но я не могу заставить это работать.
Ответ №6:
Эта задача стала намного проще с CSS3, который добавил псевдоселекторы :nth-child().
tr:nth-child(even) {
background-color: #E3E6FF;
}
tr:nth-child(odd) {
background-color: #D1D8F6;
}
Теперь вам не нужно устанавливать класс для строк вашей таблицы, просто оформляйте четные и нечетные строки по отдельности. Для этого не нужны Rails или вызовы jQuery, а CSS-решение автоматически обрабатывает изменения структуры таблицы.