URL: https://www.opennet.me/cgi-bin/openforum/vsluhboard.cgi
Форум: vsluhforumID8
Нить номер: 6196
[ Назад ]

Исходное сообщение
"Javascript: выделение строки по галочке"

Отправлено Brabus , 06-Фев-09 17:21 
Приветствую. Надеюсь на небольшую помощь, ситуация такова:
Есть обычная табличка, в каждой строке которой присутствует галочка, для выделения каждой из строк.
Цель: сделать так, чтобы по клике на галочку, строка в которой она находится - выделялась как-либо (менялся класс).
Сначала было сделано такое, только по клику на саму строку - но был определенный глюк, после чего решил событие на всю строку не вешать. В общем делаю так:

// Выбираем все таблицы на странице
  var tables = document.getElementsByTagName("table");
  for (var i=0; i < tables.length; i++)
  {
    for(var k=1; k < tables[i].rows.length; k++)
    {
// Определяем строку (для удобства)
      var row = tables[i].rows[k];
// Следующими двумя строками берем первый чекбокс в строке, по которому будем клацать
      var firstCell = row.cells[0];
      var checkbox = firstCell.firstChild;
// Вещаем событие на клик по чекбоксу
      checkbox.onclick = function ()
      {
        row.className = row.className == "selected" ? "" : "selected";
      }
    }
  }

По логике: в функции при каждой итерации цикла выбрана одна из строк (row), ее чекбокс (checkbox), на который вешается обработчик.

Результат: по клице по любой галочке в любой таблице - выделяется последняя строка последней таблицы. Ну, т.е. примерная причина глюка понятна, но заморочился уже ее решать, со всех сторон постоянно не то, что нужно.


Содержание

Сообщения в этом обсуждении
"Javascript: выделение строки по галочке"
Отправлено angra , 07-Фев-09 10:43 
Ошибка понятна даже если вообще js не знаешь. Используйте self(или как оно называется в js) вместо row в теле функции.

"Javascript: выделение строки по галочке"
Отправлено Brabus , 07-Фев-09 15:23 
>Ошибка понятна даже если вообще js не знаешь. Используйте self(или как оно
>называется в js) вместо row в теле функции.

This есть, указывает на текущий элемент.
Это работать не будет, и вот почему:
если на this заменять row в функции, которую мы вешаем на событие при клике
      checkbox.onclick = function ()
      {
        row.className = row.className == "selected" ? "" : "selected";
      }
, то this указывает на элемент, с которым функция работает, то есть на чекбокс. А нам необходимо иметь "указатель" на строку, чтобы ей менять класс.
Если же на this менять где-то выше, что в принципе бесполезно, но ради прикола сделано: this указывает на объект window.


"Javascript: выделение строки по галочке"
Отправлено BahuL , 10-Фев-09 12:07 
1.
  вы гоните массив найденных тегов table по циклу а обращаетесь не как к массиву а как к переменной
нужно не
tables.rows
а
tables [ i ] .rows
2.
После прогона по циклу в переменной row лежит указатель на последнюю строку последней таблицы, и независимо от кликнутого чекбокса будет менятся класс только последней строки последней таблицы
для простой таблички
<table width="90%" border="1" cellspacing="0" cellpadding="0">
    <tr>
        <td><input type="checkbox" name="check1" id="check1"></td>
        <td> </td>
    </tr>
    <tr>
        <td><input type="checkbox" name="check2" id="check2"></td>
        <td> </td>
    </tr>
</table>
я на скорую руку поставил
checkbox.onclick = function ()
      {
        this.parentNode.parentNode.className = this.parentNode.parentNode.className == "selected" ? "" : "selected";
      }
и у меня работало.
Уверен, что если подумать то можно сделать красивее...

"Javascript: выделение строки по галочке"
Отправлено BahuL , 10-Фев-09 12:10 
По поводу 1.
я так понял что [ i ] если написать без пробелов будет убрано скриптом проверки сообщения

"Javascript: выделение строки по галочке"
Отправлено Brabus , 10-Фев-09 19:58 
>нужно не
>tables.rows

>tables [ i ] .rows
>По поводу 1.
>я так понял что [ i ] если написать без пробелов будет
>убрано скриптом проверки сообщения

Хе, точно, а я то думаю, о чем это вы. В моих предыдущих сообщениях вырезалось.

>this.parentNode.parentNode.className = this.parentNode.parentNode.className == "selected" ? "" : "selected";

Вот, не вспомнил про такую вещь как parentNode :) Примного благодарен, этот вариант работает как положено. Ну, когда рабочий вариант есть, можно занятся и красотой, спасибо.