Как выделить строку таблицы с помощью 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», который вы будете применять к подсвеченным <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

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

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

tr:hover { background: red; }

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

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

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 4

Я немного изменил код @ swilliams .

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

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

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

Answer 5

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

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

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

Итак, что-то вроде этого может сработать:

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

Answer 6

Я нашел интересное решение для фона строк, подсвечивание строк при наведении мыши, без JS Вот ссылка

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

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

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