VPF::Не работает замена класса в тегах <tr>

divine108

Дата 17.2.2012, 12:11 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 1
Регистрация: 17.2.2012

Репутация: нет
Всего: нет

Здравствуйте, столкнулся с проблеммой, не могу явой на наведение мыши подсветить строки в таблице, примеры работают и именно на моем сайте не срабатывает.
индекс выводится сначала через php echo.
Помогите пожалуйста разобраться в чем дело. В firebug заходит в событие и все ок, но цвета не меняет.. (дополнительно см. скриншот)

Вот моя таблица:

<div class="table">

                    <table class="mTable">

                    <tr class="table_head"> <th colspan="3">&nbsp Последние добавленные</th> </tr>
                        <tr class="column_caption"> <td>Регион, Населенный пункт </td> <td>Тип товара</td> <td>Цена</td> </tr>
                        <tr class="blue"> <td>/tbtitle0/ </td> <td>/tbtitle1/ </td> <td>/tbtitle2/</td> </tr>
                        <tr> <td>/tbtitle3/ </td> <td>/tbtitle4/ </td> <td>/tbtitle5/</td> </tr>
                        <tr class="blue"> <td>/tbtitle6/</td> <td>/tbtitle7/  </td> <td>/tbtitle8/</td> </tr>
                        <tr> <td>/tbtitle9/</td> <td>/tbtitle10/ </td> <td>/tbtitle11/</td> </tr>
                        <tr class="blue"> <td>/tbtitle12/ </td> <td>/tbtitle13/ </td> <td>/tbtitle14/</td> </tr>
                        <tr> <td>/tbtitle15/ </td> <td>/tbtitle16/ </td> <td>/tbtitle17/</td> </tr>
                    </table>

                    <div class="expand_button">
                        

                        <form method="POST" action="./view_new.php">
                            <input type="image" name="view1" src="img/expand_button.png">
                            <input type="hidden" name="view" value="1">
                        </form>

                    </div>

                </div>

CSS для таблицы style.css
.table {
    padding: 0px;
    margin: 25px 0 30px 0px;
    width: 600px;
    height: 170px;
}

table, td, th {
    border: 1px solid #cbccdc;
    text-align: center;
    background-color: #f4f4f4;
    vertical-align: bottom;
}

table {
    width: 600px;
    height: 175px;
    border-collapse: collapse;
}

tr.blue td {        /* Через строчная раскраска таблицы */
background-color: #e7e3f1;
}

tr.table_head th {            /* Заголовок таблицы */
    background-image: url(../img/table_header.jpg);
    color: #ffffff;
    text-align: left
}

другой CSS js.css который через заголовок подключаю:
.svet {
background-color: #FFFFFF;
}

И сам код который не срабатывает, jquery. tables.js

//debugger;
$(document).ready(function() {

    var tableStr = $('.mTable tr');

    tableStr.mouseover(function(){
        $(this).addClass('svet');

    });

    tableStr.mouseout(function(){
        $(this).removeClass('svet');

    });

});

Заголовки так покдлючаю:
     <link href="css/style.css" type="text/css" rel="stylesheet">
    <link href="css/js.css" type="text/css" rel="stylesheet">


    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/tables.js"></script>

smile

Это сообщение отредактировал(а) divine108 - 17.2.2012, 12:28

Присоединённый файл ( Кол-во скачиваний: 10 )

4.jpg 152,79 Kb

$дмитрий

Дата 17.2.2012, 14:28 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 5
Всего: 45

Замени скрипт на

Код


$(function(){
    $('.mTable tr').hover(function(){
        $(this).addClass('svet');
    }, function(){
        $(this).removeClass('svet');
    });    
});

А стиль на

Код


.svet {        
background:#FFF !important;
}

$дмитрий

Дата 17.2.2012, 14:52 (ссылка)

(нет голосов)

Загрузка ...

Эксперт

Профиль
Группа: Завсегдатай
Сообщений: 1037
Регистрация: 19.6.2004

Репутация: 5
Всего: 45

Хотя я бы предпочел решить задачу без применения JS

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »