Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 17.02.2012, 15:15
Новичок на форуме
Отправить личное сообщение для divine108 Посмотреть профиль Найти все сообщения от divine108
 
Регистрация: 17.02.2012
Сообщений: 7

Не работает .addClass и .css(a,b). У тега <tr> не меняет свойство.
Здравствуйте, столкнулся с проблемой, не могу явой на наведение мыши подсветить строки в таблице, примеры работают и именно на моем сайте не срабатывает.
индекс.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>
Изображения:
Тип файла: jpg 4.jpg (152.8 Кб, 4 просмотров)
Ответить с цитированием
  #2 (permalink)  
Старый 17.02.2012, 15:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

divine108,
.svet {          

background-color: #FFFFFF;  

}

замените на
tr.svet td {

background-color: #FFFFFF;

}

если не поможет есть ещё вариант
Ответить с цитированием
  #3 (permalink)  
Старый 17.02.2012, 17:08
Новичок на форуме
Отправить личное сообщение для divine108 Посмотреть профиль Найти все сообщения от divine108
 
Регистрация: 17.02.2012
Сообщений: 7

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

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

Последний раз редактировалось divine108, 17.02.2012 в 17:11.
Ответить с цитированием
  #4 (permalink)  
Старый 18.02.2012, 00:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от divine108
чтобы первая строка не выделялась
var tableStr = $('.mTable tr:not(:eq(1))');

Сообщение от divine108
в чем дело было..?
Чтобы раскрасить строку, красят обычно её ячейки. поэтому был ещё вариант
$(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': ''});;

    });


});
Ответить с цитированием
  #5 (permalink)  
Старый 19.02.2012, 11:12
Новичок на форуме
Отправить личное сообщение для divine108 Посмотреть профиль Найти все сообщения от divine108
 
Регистрация: 17.02.2012
Сообщений: 7

Ок.
Вот этот код не дает выделить только первую строку первой таблицы, а у меня их три на странице..
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, 19.02.2012 в 11:59.
Ответить с цитированием
  #6 (permalink)  
Старый 19.02.2012, 12:00
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

Сообщение от divine108
мне нужно номер строки ловить для каждой таблицы где кликнули - чтобы потом открыть соответствующую запись этой строке в новом окне ,инфу достаю из БД, как такое лучше реализовать?
смотрите ссылки
Ответить с цитированием
  #7 (permalink)  
Старый 19.02.2012, 12:24
Новичок на форуме
Отправить личное сообщение для divine108 Посмотреть профиль Найти все сообщения от divine108
 
Регистрация: 17.02.2012
Сообщений: 7

ок.
но я по другому строку ловлю, исключая хедер и первую строку -
tableStr.click(function() {
        
        if(this.rowIndex+1 >= 3)
        {
            alert(this.rowIndex+1);
            alert(this.nodeName);
        }
    });


Так вот.. у меня три таблицы, классы у них одинаковые, единственное только в теге <th> разные названия, в тэйбл хедере то-есть, я смотрю справочник функций, и никак не могу найти, как мне взять тэйбл хедер элемент чтобы проверить оттуда текст - дабы узнать на какой таблице клик произошел.. Подскажите как быть.. как таблицу определить..
Ответить с цитированием
  #8 (permalink)  
Старый 19.02.2012, 13:05
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,120

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');
      });
});
});
Ответить с цитированием
  #9 (permalink)  
Старый 19.02.2012, 13:38
Новичок на форуме
Отправить личное сообщение для divine108 Посмотреть профиль Найти все сообщения от divine108
 
Регистрация: 17.02.2012
Сообщений: 7

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

Последний раз редактировалось divine108, 19.02.2012 в 13:55.
Ответить с цитированием
  #10 (permalink)  
Старый 26.02.2012, 20:19
Новичок на форуме
Отправить личное сообщение для divine108 Посмотреть профиль Найти все сообщения от divine108
 
Регистрация: 17.02.2012
Сообщений: 7

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

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

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");
  });
});
});

Последний раз редактировалось divine108, 26.02.2012 в 22:28.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
свойство text не работает в Mozilla danyamaster Firefox/Mozilla 1 18.02.2010 20:26
Не работает onClick добавление тега <s> AvaGet Общие вопросы Javascript 13 09.12.2008 18:41
Вопрос к гуру. Title через js. Не выводит title из тега <TR> shkur Элементы интерфейса 24 19.06.2008 09:03