Не работает .addClass и .css(a,b). У тега <tr> не меняет свойство.

[divine108]

Здравствуйте, столкнулся с проблемой, не могу явой на наведение мыши подсветить строки в таблице, примеры работают и именно на моем сайте не срабатывает.
индекс.html выводится сначала через 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"> 
                        <!--<a href="./view_new.php"><img src="img/expand_button.png" alt="Раскрыть список"></a>-->
                        
                        <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><!-- end table-->

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>

[рони]

divine108,

.svet {          

background-color: #FFFFFF;  

}

замените на

tr.svet td {

background-color: #FFFFFF;

}

если не поможет есть ещё вариант

[divine108]

Спасибо! Сработало!
Объясните пожалуйста, в чем дело было..?
И я не совсем понял вашу запись, если не сложно можете объяснить?

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

[рони]

чтобы первая строка не выделялась

var tableStr = $('.mTable tr:not(:eq(1))');

в чем дело было..?

Чтобы раскрасить строку, красят обычно её ячейки. поэтому был ещё вариант

$(document).ready(function() {

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

    tableStr.mouseover(function(){
        $(this).find('td').css({'background-color': '#FFFFFF'});

    });

    tableStr.mouseout(function(){
        $(this).find('td').css({'background-color': ''});;

    });


});

[divine108]

Ок.
Вот этот код не дает выделить только первую строку первой таблицы, а у меня их три на странице..

debugger;
$(document).ready(function() {
    
    var tableStr = $('.mTable tr:not(:eq(1))');
    
    tableStr.mouseover(function(){
        $(this).addClass('svet');
        $(this).css("cursor","pointer");
        
    });
    
    tableStr.mouseout(function(){
        $(this).removeClass('svet');
        $(this).css("cursor","hand");
        
    });


});

как сделать чтобы у каждой таблицы первую строку не выделяло?

п.с. последний вопрос для гуру)), подскажите, мне нужно номер строки ловить для каждой таблицы где кликнули - чтобы потом открыть соответствующую запись этой строке в новом окне ,инфу достаю из БД, как такое лучше реализовать? Вызываться по клику php файл должен, который там уже в шаблон все подставит.

[рони]

мне нужно номер строки ловить для каждой таблицы где кликнули - чтобы потом открыть соответствующую запись этой строке в новом окне ,инфу достаю из БД, как такое лучше реализовать?

смотрите ссылки

[divine108]

ок.
но я по другому строку ловлю, исключая хедер и первую строку -

tableStr.click(function() {
        
        if(this.rowIndex+1 >= 3)
        {
            alert(this.rowIndex+1);
            alert(this.nodeName);
        }
    });

Так вот.. у меня три таблицы, классы у них одинаковые, единственное только в теге <th> разные названия, в тэйбл хедере то-есть, я смотрю справочник функций, и никак не могу найти, как мне взять тэйбл хедер элемент чтобы проверить оттуда текст - дабы узнать на какой таблице клик произошел.. Подскажите как быть.. как таблицу определить..

[рони]

divine108, при клике на строку будет номер таблицы и номер строки... плюс 1 строка исключена из hover

$(document).ready(function() {

   var table = $('.mTable');
   table.each(function(index) {
   var table_index =  index;
   var tableStr = $(this).find('tr');
   tableStr.each(function(index) {
   $(this).click (function () {alert([table_index,index])});
    })
   tableStr = $(this).find('tr:not(:eq(1))');
   tableStr.mouseover(function(){
        $(this).addClass('svet');
      });
   tableStr.mouseout(function(){
        $(this).removeClass('svet');
      });
});
});

[divine108]

Ого! Исчерпывающе! Спасибо большое!

[divine108]

Добрый всем вечер!
Возникла такой вопрос, как можно реализовать проверку наличия текста в строке? У меня получается клик и фокус ловятся для каждой строки, но там где в шаблон пхп не подставил текст, то-есть нет больше записей нужно чтобы не фокус не клик не срабатывали..
Используется все тот же код что выше.
Помогите пожалуйста этот вопрос решить.

И еще вопрос попутно, при фокусе над строкой если указатель находится над текстом - то он принимает форму каретки, хотя клик работает исправно, как сделать чтобы он всегда был одного вида?

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

  var table = $('.rTable');
  
        var tableStr = table.find('tr');
        
        tableStr.each(function(index) {
            $(this).click (function () {alert(index)
            window.location.href = "http://mysite.loc/details.php?T=" + "3" + "&R=" + index;
            });
            
  
  tableStr = $(this).find('tr:not(:eq(1))');
  tableStr.mouseover(function(){
    
    $(this).addClass('svet');
    $(this).css("cursor","hand");
  });
  
  tableStr.mouseout(function(){
    
    $(this).removeClass('svet');
    $(this).css("cursor","hand");
  });
});
});