Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Не окрашиваются стоки таблицы (https://javascript.ru/forum/jquery/16090-ne-okrashivayutsya-stoki-tablicy.html)

Avron2 25.03.2011 15:51

Не окрашиваются стоки таблицы
 
Фрагмент таблицы:
print "<tr class=trTheme id=$Fetch[id]>
                    <td width='16' class='theme'> <input type='checkbox' class='cbTheme' id=$Fetch[id] name='cbTheme$Fetch[id]' value=$Fetch[id]/></td>";


Событие клика на чекбокс и вызов функции окраски строки таблицы:
function select_color_tr(id)    {
    /*Выделяем цветом строки отмеченные галочкой*/
        if ($('.cbTheme#'+id).attr('checked'))    {
            $('.trTheme#'+id).addClass('temp');
        } 
        else    {
            $('.trTheme#'+id).removeClass('temp');
        } 
    }
/*Кликаем по галочке темы*/
    $('.cbTheme').click(function()  {
        var id=$(this).attr('id'); 
        select_color_tr(id);
    });


При клике на чекбоксе в FireFox и IE строки не окрашиваются, а в опере окрашиваются. В чем проблема?

kostr 25.03.2011 16:44

У вас какая-то сложная функция, зачем она вообще? Вот так работает везде:
$(".cbTheme:checkbox").change(function(){
  if ($(this).is(":checked"))
   $(this).closest(".trTheme").addClass('temp');
  else
   $(this).closest(".trTheme").removeClass('temp');
 });

Avron2 25.03.2011 17:17

Посмотрите теперь
 
Но ответьте, пожалуйта на вопрос, почему все-таки не работает? Ведь если мы будем сталкиваться с проблемами и придумывать другие пути их решения, то мы не решаем трудности, а ищем легкие пути или те, которые уже раньше проходили. В предыдущем скрипте было все так сложно, т.к. я подразумевал что функция select_color_tr(id) быдет вызываться и при щелчке на чекбоксе и на строке.

Переделал скрипт, теперь если кликаем по галочке, то строчка окрашивается, а если кликаем по строчке, то галочка не ставиться и строчка не окрашивается.

/*Кликаем по галочке темы*/
    $('.cbTheme').click(function()  {
        var id =$(this).attr('id'); 
        /*Выделяем цветом строки отмеченные галочкой*/
        if ($(this).attr('checked'))    {
            $('.trTheme#'+id).addClass('temp');
        } 
        else    {
            $('.trTheme#'+id).removeClass('temp');
        } 
        changeMenu();
    });

    /*если кликнули по строчке, то ставим галочку и окрашиваем*/
    $('.trTheme').click(function() {
       var id = $(this).attr('id');
       $('.cbTheme#'+id).click();
    });

kostr 25.03.2011 18:37

Ну во-первых, у вас повторяется id - у чебокса и строки, а он должен быть уникальным.
А во-вторых, мне кажется, у чебокса просто нет метода click(). Или есть не во всех браузерах. С этим методом вообще много непоняток, лучше уж атрибут менять.

Avron2 25.03.2011 18:48

А если одинаковые id, но в разных классах? Я ведь явно пишу принадлежность id к классу cbTheme.
$('.cbTheme#'+id)
Это не правильно?

Если так нельзя, то тогда id элемента нужно передавать в каком-то придуманном атрибуте (не стандартном в html). Как в такой ситуации лучше идентифицировать конкретный элемент в группе?
Или в цикле где формируются строки таблицы подключать обработчики событий с помощью bind()?

kostr 25.03.2011 18:54

Все равно в каких классах, id должен быть один. Файрфокс, во всяком случае, видит только первый, если элементов с одним id несколько.

Avron2 25.03.2011 18:55

Как быть в такой ситуации?
 
Как в такой ситуации лучше идентифицировать конкретный элемент в группе?
Или в цикле где формируются строки таблицы подключать обработчики событий с помощью bind()?

kostr 25.03.2011 18:56

Ну можно к одному из id впереди буковку добавить. А вот bind не спасет, если метода нету.

FINoM 25.03.2011 18:59

Цитата:

Сообщение от Avron2
Как в такой ситуации лучше идентифицировать конкретный элемент в группе?

Добавить второй класс, например <tag class="valera volodia" />
А в jQuery обращаться так: $('.valera.volodia')

Avron2 25.03.2011 19:17

Цитата:

Сообщение от kostr (Сообщение 98023)
Ну можно к одному из id впереди буковку добавить. А вот bind не спасет, если метода нету.

print "<tr class=trTheme id=tr$Fetch[id]> 
                    <td width='16' class='theme'> <input type='checkbox' class='cbTheme' id=cb$Fetch[id] name='cbTheme$Fetch[id]' value=$Fetch[id]/></td>";

Добавил к id строки "tr" и к id чекбокса "cb". Тогда чтобы узнать id, нужно вырезать эти буквы из id?


Часовой пояс GMT +3, время: 19:53.