Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   событие onclick и выделение элементов таблицы (https://javascript.ru/forum/events/29531-sobytie-onclick-i-vydelenie-ehlementov-tablicy.html)

Eser 02.07.2012 12:08

событие onclick и выделение элементов таблицы
 
PHP
Цикл:
{
<tr  id='$row[id]' onclick=change_color(\"$row[id]\")>
<td>Название</td> 
}


Javascript
function change_color(value)
{
document.getElementById(value).style.backgroundColor='red';
}


Подскажите как скидывать ранее выбранные элементы без перезагрузки страницы. Что б в один момент времени был выделен только один элемент? В упор не понимаю за что зацепится.

Deff 02.07.2012 12:35

Eser,
Цветовыделение делаем css(ом) по классу
<style>
td.active {
 .background-color:#red;
}
</style>


<td class="active" ...


При клике - удаляем все классы active с элементов таблы и добавляем к текущему кликнутому

Eser 02.07.2012 13:46

Не могли бы показать кусок кода:"удаляем все классы active"
А можно ли document.getElementsByTagName('tr').style.backgrou ndColor=''; вот так?
Т.е при запуске функции у всех tr убираем цвет и ставим у одного:
document.getElementById(value).style.backgroundCol or='red';

Deff 02.07.2012 13:49

Eser,
Обходите в цикле все ячейки таблы по тегу td и removeAttribute('class')

Eser 02.07.2012 14:45

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

function change_color(value)
{
var table = document.getElementById('Table');
var trList= table.getElementsByTagName('tr');
for (var i=0;i<trList.length;i++)
{
document.getElementById(trList[i]).removeAttribute('class');
} 

}

Deff 02.07.2012 14:58

function change_color(value)
{
var table = document.getElementById('Table');
var trList= table.getElementsByTagName('tr');
for (var i=0;i<trList.length;i++)
{
  trList[i].removeAttribute('class');
} 

}

Eser 02.07.2012 15:12

Все большое спасибо.
Получилось как через классы так и через style.backgroundColor='';

Deff 02.07.2012 16:13

Eser,
Прост css при многострочной таблице - быстрее


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