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