Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Динамическое изменение background-a в ячейках таблицы (https://javascript.ru/forum/events/6918-dinamicheskoe-izmenenie-background-v-yachejjkakh-tablicy.html)

mau 02.08.2012 16:52

Цитата:

Сообщение от Octane (Сообщение 39745)
Ну в чем проблема, сохраняйте ссылку на измененный элемент и потом возвращайте его в исходное состояние. А лучше вообще не el.style менять, а просто CSS-класс (el.className).

Простите за глупый вопрос, я только начинаю разбираться в js. Как сохранить ссылку на измененный элемент и потом вернуть его в исходное состояние. Заранее благодарен!

Deff 02.08.2012 17:48

mau,
Вообще - классически - это добавлять класс с прописанным новым стилевым оформлением в стилях - и удалять все данные классы при установке класса на новый элемент(хотя бывают причины не придерживацо классики, если делаем анимацию данных свойст не через css - а скриптом) или иной алгоритм

mau 02.08.2012 18:20

Это все хорошо. Но так как я только начинаю писать на js из ваших слов я понял лишь, что нужно:
а) добавить класс стилевого оформления;
б) удалить другие классы используемые элементом к которому я хочу применить класс созданный в пункте "а";
в) применить созданный в пункте "а" класс к нужному мне элементу;
Но я понятия не имею как сделать пункт "б". Это раз.
Во-вторых мне непонятно как применить класс к нужному мне элементу из обработчика события не связанного с этим элементом. В данном случае это строка таблицы.
Например я щелкаю один раз по строке. Событие onClick меняет цвет заливки. ОК. Я щелкаю по другой строке. Событие onClick меняет цвет заливки и возвращает цвет заливки предыдущей строки. Вот как поменять цвет заливки предыдущей строки мне собственно говоря и не понятно.

Deff 02.08.2012 18:29

mau,
С
Цитата:

Сообщение от mau
а) добавить класс стилевого оформления;

И б) При клике на новый элемент - убираем всюду добавленный исключительно данный класс
И ставим его только у текущего
Цитата:

Сообщение от mau
от как поменять цвет заливки предыдущей строки мне собственно говоря и не понятно.

В классе у Вас и прописан новый цвет заливки - убираете класс - возвращается исходная заливка

mau 02.08.2012 19:11

Цитата:

убираем всюду добавленный исключительно данный класс
Если не сложно элементарный пример можете показать. Достаточно двух строк. Например: add(class), removeall(class). Буду очень благодарен. Когда очень много незнакомого копать очень тяжело. Спасибо. Разобрался)

Deff 02.08.2012 19:40

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<meta content="text/html; charset=windows-1251" http-equiv="Content-Type">
<script type="text/javascript" src="http://yandex.st/jquery/1.4.4/jquery.min.js"></script>
</head>
<body style="text-align:center;padding-top:34px;">
<center>

<style>
table td {
  background:#3BDE3B;
}
table td.Active {
  background:#FC9090;
}
</style>

<table border='1'>
 <tbody>
   <tr>
      <td>ячейка 1</td><td>ячейка 2</td><td>ячейка 3</td>
  </tr>
     <tr><td>ячейка 4</td><td id=My>ячейка 5</td><td>ячейка 6</td>
  </tr>
  <tr>
     <td>ячейка 7</td><td>ячейка 8</td><td>ячейка 9</td>
  </tr>
 </tbody>
</table>

</center>
<script type="text/javascript">
$("table td").click (function() {
  $("table td").removeClass('Active');
  $(this).addClass('Active');
});
</script>


</body>
</html>


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