Я хочу, чтобы в строке был правильный класс

Question

Я использую это для цветов строк:

 echo"<tr class=\"normal\" onClick=\"this.className='normalselected'\" 
           onmouseover=\"this.className='normalon'\" 
           onmouseout=\"this.className='normal'\">\n";

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

Как я могу это изменить?

Answer 1

echo "<tr class=\"normal\" onclick=\"this.className='normalselected'\" 
       onmouseover=\"if (!/normalselected/gi.test(this.className)) this.className='normalon'\" 
       onmouseout=\"if (!/normalselected/gi.test(this.className)) this.className='normal'\">\n";

Хотя я бы серьезно подумал об использовании наведения CSS и соответствующих слушателей событий.

Answer 2

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

if('normalon' == this.className)

в обработчик событий mouseout

, а также, возможно, вы захотите запретить добавление класса normalon при повторном входе в уже выбранную строку.поэтому вам нужно добавить что-то вроде

if('normal' == this.className) 

в ваш атрибут onmouseover ... но вам действительно следует рассмотреть возможность использования функции вместо всех этих условий, если вы планируете придерживаться JavaScript для этого

Answer 3

потому что onmouseout вернул его в нормальное состояние;что вам нужно помнить, когда вы нажали.хотя это не "хорошее" решение, оно должно делать то, что вы хотите

В вашем CSS

.normal-clicked,
.normal-over { 
     /* whatever needs to go here */
}
.normal {
     /* whatever needs to go here */
}

Затем в php

?>
<script type="text/javascript">
    function handleClick( el ){
        if ( el.className == 'normal-clicked' ){
            el.className = 'normal';
        }
        else {
            el.className = 'normal-clicked';
        }
    }
    function handleMouseOver( el ){
        el.className = 'normal-over';
    }
    function handleMouseOut( el ){
        if ( el.className == 'normal-over' ){
            el.className = 'normal';
        }
    }
</script>
<?php
echo '<tr class="normal" onclick="handleClick(this);" onmouseover="handleMouseOver(this);" onmouseout="handleMouseOut(this);">', "\n";