Как я могу выделить строку таблицы с использованием Prototype?

Question

Как я могу использовать библиотеку Prototype и создавать ненавязчивый javascript для ввода событий onmouseover и onmouseout в каждую строку, вместо того, чтобы помещать javascript в каждый тег строки таблицы?

Ответ на использование библиотеки Prototype (вместо mootools, jQuery и т. Д.) Был бы наиболее полезен.

Answer 1

<table id="mytable"> 
    <tbody> 
     <tr><td>Foo</td><td>Bar</td></tr> 
     <tr><td>Bork</td><td>Bork</td></tr> 

    </tbody> 
</table> 

<script type="text/javascript"> 

$$('#mytable tr').each(function(item) { 
    item.observe('mouseover', function() { 
     item.setStyle({ backgroundColor: '#ddd' }); 
    }); 
    item.observe('mouseout', function() { 
     item.setStyle({backgroundColor: '#fff' }); 
    }); 
}); 
</script> 

Answer 2

Вы можете использовать методы прототипа addClassName и removeClassName.

Создайте класс CSS «hilight», который вы примените к hilighted <tr>. Затем запустите этот код на странице загрузки:

var rows = $$('tbody tr'); 
for (var i = 0; i < rows.length; i++) { 
    rows[i].onmouseover = function() { $(this).addClassName('hilight'); } 
    rows[i].onmouseout = function() { $(this).removeClassName('hilight'); } 
} 

Answer 3

Вы можете сделать что-то к каждой строке, например:

$('tableId').getElementsBySelector('tr').each(function (row) { 
    ... 
}); 

Таким образом, в теле этой функции, вы имеете доступ к каждому строка, по одному в переменной «row». Затем можно вызвать Event.observe (строка, ...)

Так, что-то подобное может работать:

$('tableId').getElementsBySelector('tr').each(function (row) { 
    Event.observe(row, 'mouseover', function() {...do hightlight code...}); 
}); 

Answer 4

Я сделал небольшое изменение в @swilliams кода.

$$('#thetable tr:not(#headRow)').each(

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

<tr id="headRow"> 
    <th>Header 1</th> 
</tr> 

Answer 5

Немного общее решение:

Скажем, я хочу иметь простой способ сделать таблицы с рядами, которые выдвигают на первый план, когда я поставил указатель мыши над ними. В идеальном мире это было бы очень легко, только с одним простым правилом CSS:

tr:hover { background: red; } 

К сожалению, более старые версии IE не поддерживают селектор: парить на других, чем A. элементов Таким образом, мы должны использовать JavaScript.

В этом случае я определяю класс таблицы «highlightable», чтобы отмечать таблицы, которые должны иметь парирующие строки. Я сделаю переключение фона, добавив и удалив класс «выделить» в строке таблицы.

CSS

table.highlightable tr.highlight { background: red; } 

JavaScript (с помощью прототипа)

// when document loads 
document.observe('dom:loaded', function() { 
    // find all rows in highlightable table 
    $$('table.highlightable tr').each(function(row) { 
     // add/remove class "highlight" when mouse enters/leaves 
     row.observe('mouseover', function(evt) { evt.element().addClassName('highlight') }); 
     row.observe('mouseout', function(evt) { evt.element().removeClassName('highlight') }); 
    }); 
}) 

HTML

Все, что вам нужно сделать сейчас, чтобы добавить класс "highlightable" любому таблицу, которую вы хотите:

<table class="highlightable"> 
    ... 
</table> 

Answer 6

Я нашел ab интересное решение для фона Rows, строки, выделенные на мыши, без JS.Вот link

Работает во всех браузерах. Для IE6/7/8 ...

tr{ position: relative; } 
td{ background-image: none } 

И для Safari я использую отрицательное положение фона для каждого TD.