javascript для выделения строки и переключения цвета при нажатии

Мне нужно иметь возможность делать следующее на TR:

  • onmouseover выделяет всю строку одним цветом
  • при щелчке по строке выделите строку другим цветом (если вы снова щелкнете по той же строке, она не подсветит строку - установит для нее исходный цвет bgcolor)
  • у меня проблема в том, что в моем списке bgcolor строки чередуется между двумя цветами.
  • приведенный ниже код работает только для выделения одной строки за раз, строка должна оставаться выделенной до тех пор, пока она не будет нажата снова.

Вот некоторый код, который я использую для щелчка, чтобы выбрать, что работает, но мне нужно изменить его, чтобы он включал/выключал подсветку строки.

<script type="text/javascript"> 
var preEl;
var orgBColor;
var orgTColor;
function highlighttr(el, backColor, textColor) {
    if (typeof (preEl) != 'undefined') {
        preEl.bgColor = orgBColor;
        try { ChangeTextColor(preEl, orgTColor); } catch (e) { ; }
    }
    orgBColor = el.bgColor;
    orgTColor = el.style.color;
    el.bgColor = backColor;

    try { ChangeTextColor(el, textColor); } catch (e) { ; }
    preEl = el;
}


function ChangeTextColor(a_obj, a_color) {
    ;
    for (i = 0; i < a_obj.cells.length; i++)
        a_obj.cells(i).style.color = a_color;
}
</script>

c# asp.net row onclick onmouseover
person sd_dracula    schedule 16.06.2012    source источник
comment
Вопрос: должно ли состояние после щелчка оставаться таким или нормально, если оно сохраняется только до тех пор, пока удерживается кнопка мыши?   -  person sinni800    schedule 16.06.2012

Ответы (2)


arrow_upward
1
arrow_downward

Это традиционный способ, кстати, кроссбраузерный (и платформенный).

CSS

.tr {background-color:#fff}
.trOver {background-color:#ddd}
.trClicked {background-color:#bbb}

JS

function over(o)
{
    if ('trClicked' != o.className) o.className = 'trOver';
}
function out(o)
{
    if ('trClicked' != o.className) o.className = 'tr';
}
function clicked(o)
{
    o.className = ('trClicked' == o.className) ? 'tr' : 'trClicked';
}

HTML

<tr class="tr" onmouseover="over(this)" onmouseout="out(this)" onclick="clicked(this)">
    // tds without defined background color...
</tr>
person Community    schedule 16.06.2012
comment
только что попробовал это. Я ничего не получаю. У меня есть CSS в ‹style› и JS в ‹script type=text/javascript› страницы aspx. может синтаксическая ошибка? - person sd_dracula; 16.06.2012
comment
Извиняюсь. ТР с классом! ‹tr class=tr onmouseover=over(this)... Исправлено также в моем ответе. - person ; 16.06.2012
comment
Onmouseover и onmouseout действительно работают. просто ничего не происходит при клике. Разве onmouseout не всегда перезаписывал onclick? - person sd_dracula; 16.06.2012
comment
В моем LayoutTemplate списка есть это: ‹table ID=itemPlaceholderContainer runat=server border=1 style=table-layout:fixed;border-collapse: свернуть;border-color: #999999;border-style:none;border- ширина: 1 пиксель; семейство шрифтов: Verdana, Arial, Helvetica, sans-serif;› ‹tr id=headerRow runat=server bgcolor=#595959› Имеет ли это значение? Не должно, это только для заголовка - person sd_dracula; 16.06.2012
comment
Иногда я !@#! :( Переименуйте функцию click в clicked и измените onclick=click(this) на onclick=clicked(this). Извините. - person ; 16.06.2012

arrow_upward
2
arrow_downward

  • onmouseover выделяет всю строку одним цветом

добавить :hover к tr стилям

  • при щелчке по строке выделите строку другим цветом (если вы снова щелкнете по той же строке, она не подсветит строку - установит для нее исходный цвет bgcolor)

    $('tr').click( function () {
    if($(this).hasClass("clicked"))
    {
        $(this).removeClass("clicked");
    }else{
        $(this).addClass("clicked");
}
});

и добавьте к нему стили.

  • у меня проблема в том, что в моем списке bgcolor строки чередуется между двумя цветами.

вы можете добавить :nth-child(2n) к своим стилям, чтобы собрать все вместе.

ПРИМЕР

http://jsfiddle.net/uuZdB/6/

person Mateusz Rogulski    schedule 16.06.2012
comment
это код выше jquery? как сформулировать так, чтобы asp его распознал? ‹script type=text/javascript› код здесь ‹/style›? и что значит добавить к нему стили? - person sd_dracula; 16.06.2012
comment
Интересно, почему больше никто не упомянул tr:hover. Добавлять больше Javascript поверх всего довольно безумно. - person sinni800; 16.06.2012
comment
Да, он использует jquery, но вы также можете сделать это без него. Часть Javascript должна быть в теге <script type="text/javascript"></script>. Стили должны быть в вашем стиле овцы. Когда я сказал добавить стили, я имел в виду, что вы должны добавить background-color к правилу стилей, которые используют псевдоклассы. - person Mateusz Rogulski; 16.06.2012
comment
Только что сделал :) И последнее, как изменить его, чтобы он обслуживал чередующиеся строки, которые имеют другой цвет? Как в AlternatingItemTemplate строки будут иметь один цвет, а строки ItemTemplate будут другого цвета? - person sd_dracula; 16.06.2012