Как выделить строку таблицы с помощью Prototype?
-
09-06-2019 - |
Вопрос
Как я могу использовать библиотеку прототипов и создать ненавязчивый JavaScript для внедрения событий onmouseover и onmouseout в каждую строку, вместо того, чтобы помещать javascript в каждый тег строки таблицы?
Ответ с использованием библиотеки Prototype (вместо mootools, jQuery и т. д.) был бы наиболее полезным.
Решение
<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>
Другие советы
Вы можете использовать прототип 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'); }
}
Немного общее решение:
Допустим, я хочу иметь простой способ создания таблиц со строками, которые будут подсвечиваться, когда я наведу на них указатель мыши.В идеальном мире это было бы очень просто, с помощью всего одного простого правила CSS:
tr:hover { background: red; }
К сожалению, старые версии IE не поддерживают селектор :hover для элементов, отличных от A.Поэтому нам придется использовать JavaScript.
В этом случае я определю класс таблицы «highlightable», чтобы отметить таблицы, которые должны иметь зависающие строки.Я сделаю переключение фона, добавляя и удаляя класс «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>
Я внес небольшое изменение в @swilliams код.
$$('#thetable tr:not(#headRow)').each(
Это позволяет мне иметь таблицу со строкой заголовка, которая не делает выделиться.
<tr id="headRow">
<th>Header 1</th>
</tr>
Вы можете что-то сделать с каждой строкой, например:
$('tableId').getElementsBySelector('tr').each(function (row) {
...
});
Итак, в теле этой функции у вас есть доступ к каждой строке по одной в переменной 'row'.Затем вы можете вызвать Event.observe(row,...)
Итак, что-то вроде этого может сработать:
$('tableId').getElementsBySelector('tr').each(function (row) {
Event.observe(row, 'mouseover', function () {...do hightlight code...});
});
Я нашел интересное решение для фона строк, выделения строк при наведении курсора мыши, без JS.Вот связь
Работает во всех браузерах.Для IE6/7/8...
tr{ position: relative; }
td{ background-image: none }
А для Safari я использую отрицательную позицию фона для каждого TD.