Приветствую. Надеюсь на небольшую помощь, ситуация такова:
Есть обычная табличка, в каждой строке которой присутствует галочка, для выделения каждой из строк.
Цель: сделать так, чтобы по клике на галочку, строка в которой она находится - выделялась как-либо (менялся класс).
Сначала было сделано такое, только по клику на саму строку - но был определенный глюк, после чего решил событие на всю строку не вешать. В общем делаю так:// Выбираем все таблицы на странице
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), на который вешается обработчик.
Результат: по клице по любой галочке в любой таблице - выделяется последняя строка последней таблицы. Ну, т.е. примерная причина глюка понятна, но заморочился уже ее решать, со всех сторон постоянно не то, что нужно.
Ошибка понятна даже если вообще js не знаешь. Используйте self(или как оно называется в js) вместо row в теле функции.
>Ошибка понятна даже если вообще js не знаешь. Используйте self(или как оно
>называется в js) вместо row в теле функции.This есть, указывает на текущий элемент.
Это работать не будет, и вот почему:
если на this заменять row в функции, которую мы вешаем на событие при клике
checkbox.onclick = function ()
{
row.className = row.className == "selected" ? "" : "selected";
}
, то this указывает на элемент, с которым функция работает, то есть на чекбокс. А нам необходимо иметь "указатель" на строку, чтобы ей менять класс.
Если же на this менять где-то выше, что в принципе бесполезно, но ради прикола сделано: this указывает на объект window.
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";
}
и у меня работало.
Уверен, что если подумать то можно сделать красивее...
По поводу 1.
я так понял что [ i ] если написать без пробелов будет убрано скриптом проверки сообщения
>нужно не
>tables.rows
>а
>tables [ i ] .rows
>По поводу 1.
>я так понял что [ i ] если написать без пробелов будет
>убрано скриптом проверки сообщенияХе, точно, а я то думаю, о чем это вы. В моих предыдущих сообщениях вырезалось.
>this.parentNode.parentNode.className = this.parentNode.parentNode.className == "selected" ? "" : "selected";
Вот, не вспомнил про такую вещь как parentNode :) Примного благодарен, этот вариант работает как положено. Ну, когда рабочий вариант есть, можно занятся и красотой, спасибо.