Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.01.2010, 16:35
Новичок на форуме
Отправить личное сообщение для Gh0stik Посмотреть профиль Найти все сообщения от Gh0stik
 
Регистрация: 04.01.2010
Сообщений: 6

Динамическое изменение background-a в ячейках таблицы
Доброе время суток.

Есть такая страничка:
<html>
<head>
  <link rel="stylesheet" href="css.css" type="text/css" />
  <title>Table</title>
</head>

<body>
<table class="tcolor">
<tr><th>Field 1</th><th>Field 2</th><th>Field 3</th></tr>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>3</td><td>5</td><td>7</td></tr>
<tr><td>5</td><td>8</td><td>11</td></tr>
<tr><td>7</td><td>11</td><td>15</td></tr>
</table>

<script language="JavaScript" src="change_gif.js" type="text/javascript"></script>
</body>
</html>


Соответственно стиль:
.tcolor {
	font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
	background-color: #CDCDCD;
	margin:10px 0pt 15px;
	font-size: 8pt;
	width: 100%;
	text-align: left;
}

.tcolor th {
    background-color: #99CCCC;
	background-image: url(c-red.gif);
	background-repeat: no-repeat;
	background-position: center right;
	cursor: pointer;
}


И сам скрипт:
document.onclick = function(evt)
{
  evt = evt || window.event;
  var el = evt.target || evt.srcElement;
  if ((el.tagName.toLowerCase() == "th") && (el.parentNode.parentNode.parentNode.className == "tcolor"))
  {
    with (el.style) {
      if (backgroundImage == "") {backgroundImage='url(c-red.gif)'; }

      p1 = backgroundImage.lastIndexOf('c-')+2;
      p2 = backgroundImage.lastIndexOf('.gif');
      imgName = backgroundImage.substr(p1, p2-p1);

      switch (imgName)
      {
        case 'red': backgroundImage = backgroundImage.replace('red','green'); break;
        case 'green': backgroundImage = backgroundImage.replace('green','yellow'); break;
        case 'yellow': backgroundImage = backgroundImage.replace('yellow','green'); break;
      }
    }
  }
}


По нажатию на заголовок таблицы происходит замена фоновой картинки ячейки. Но возник вопрос, как можно сделать так, чтобы при нажатии на очередной TH, стиль в "уже нажатой" (посещенном) ячейке изменялся на базовый, т.е. опять возвращался в url(c-red.gif);

И почему при первом обращении к свойству backgroundImage оно пустое? И мне приходится вручную его задавать
if (backgroundImage == "") {backgroundImage='url(c-red.gif)'; }

Как этого избежать? И как можно получить базовый стиль?
Пробовал его получить через el.style.cssText, но это свойство пустое .

Заранее спасибо за оказанную помощь.
Ответить с цитированием
  #2 (permalink)  
Старый 05.01.2010, 16:37
Новичок на форуме
Отправить личное сообщение для Gh0stik Посмотреть профиль Найти все сообщения от Gh0stik
 
Регистрация: 04.01.2010
Сообщений: 6

И вообще насколько верно я обрабатываю событие нажатия на ячейку TH? Может есть другой более верный/простой способ?
Ответить с цитированием
  #3 (permalink)  
Старый 05.01.2010, 17:28
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от Gh0stik
И почему при первом обращении к свойству backgroundImage оно пустое?
Вы же берете одно из значений свойства el.style, которое изначально пустое
<tag style="…">…</tag>

Для обращения к вычисленным стилям получайте объект computedStyle (currentStyle в IE).

Сообщение от Gh0stik
И вообще насколько верно я обрабатываю событие нажатия на ячейку TH?
Верный способ, только событие onclick лучше начинать отлавливать на элементе <table>.

Последний раз редактировалось Octane, 05.01.2010 в 17:31.
Ответить с цитированием
  #4 (permalink)  
Старый 05.01.2010, 18:37
Новичок на форуме
Отправить личное сообщение для Gh0stik Посмотреть профиль Найти все сообщения от Gh0stik
 
Регистрация: 04.01.2010
Сообщений: 6

Спасибо за подсказку, вот исправил:
document.onclick = function(evt)
{
  evt = evt || window.event;
  var el = evt.target || evt.srcElement;
  if ((el.tagName.toLowerCase() == "th") && (el.parentNode.parentNode.parentNode.className == "tcolor"))
  {
    var elStyle = el.currentStyle || window.getComputedStyle(el, null);
    with (elStyle) {
      sValue = backgroundImage;
      p1 = sValue.lastIndexOf('c-')+2;
      p2 = sValue.lastIndexOf('.gif');
      imgName = sValue.substr(p1, p2-p1);

      switch (imgName)
      {
        case 'red': el.style.setProperty('background-image', sValue.replace('red','green'), "");  break;
        case 'green': el.style.setProperty('background-image', sValue.replace('green','yellow'), ""); break;
        case 'yellow': el.style.setProperty('background-image', sValue.replace('yellow','green'), ""); break;
      }
    }
  }
}

Но теперь не работает для IE, подскажите почему...


Сообщение от Octane
Верный способ, только событие onclick лучше начинать отлавливать на элементе <table>.
Не совсем понял, как это реализуется...

Есть ли возможность сделать так, чтобы при нажатии на очередной TH, стиль в "уже нажатой" (посещенном) ячейке изменялся на базовый, т.е. опять возвращался в url(c-red.gif);?
Ответить с цитированием
  #5 (permalink)  
Старый 05.01.2010, 19:20
Отправить личное сообщение для Octane Посмотреть профиль Найти все сообщения от Octane  
Регистрация: 10.07.2008
Сообщений: 3,873

Сообщение от Gh0stik
Но теперь не работает для IE, подскажите почему...
Какие ошибки выдает? p1, p2, imgName не надо через var записать? Может setProperty не поддерживает, зачем так сделали? В предыдущем коде el.style.backgroundImage = …; везде должно работать.

Сообщение от Gh0stik
Не совсем понял, как это реализуется...
Для каждого элемента <table> с CSS-классом tcolor добавить обработчик события onclick, а не для всего document.

Сообщение от Gh0stik
Есть ли возможность сделать так, чтобы при нажатии на очередной TH, стиль в "уже нажатой" (посещенном) ячейке изменялся на базовый, т.е. опять возвращался в url(c-red.gif);?
Ну в чем проблема, сохраняйте ссылку на измененный элемент и потом возвращайте его в исходное состояние. А лучше вообще не el.style менять, а просто CSS-класс (el.className).

Последний раз редактировалось Octane, 05.01.2010 в 19:23.
Ответить с цитированием
  #6 (permalink)  
Старый 06.01.2010, 00:54
Новичок на форуме
Отправить личное сообщение для Gh0stik Посмотреть профиль Найти все сообщения от Gh0stik
 
Регистрация: 04.01.2010
Сообщений: 6

Большое спасибо за замечания и советы. Все получилось!
Ответить с цитированием
  #7 (permalink)  
Старый 09.02.2011, 21:56
Новичок на форуме
Отправить личное сообщение для SanaPo Посмотреть профиль Найти все сообщения от SanaPo
 
Регистрация: 09.02.2011
Сообщений: 5

подскажите и че тут не так?

в <script languarge=JavaScript1.2><!-- ...--></script>,
mx.style.background="#ffcc88"; - работает
mx.style.backgroundImage='url(1.bmp)' - нет
mx.style.backgroundImage='url("1.bmp")' - нет
mx.style.background-Image='url(1.bmp)' - нет
ПОЧЕМУ?
mx-переменная id-шек <td>-шек
Ответить с цитированием
  #8 (permalink)  
Старый 09.02.2011, 22:25
х.з
Посмотреть профиль Найти все сообщения от dmitriymar
 
Регистрация: 21.11.2010
Сообщений: 4,588

document.getElementById("....").style.backgroundImage = "1.bmp"
Ответить с цитированием
  #9 (permalink)  
Старый 11.02.2011, 18:39
Новичок на форуме
Отправить личное сообщение для SanaPo Посмотреть профиль Найти все сообщения от SanaPo
 
Регистрация: 09.02.2011
Сообщений: 5

<html>
<head></head>
<body>
<script><!--
document.write('Hello');
document.getElementById("one").style.backgroundIma ge = "1.bmp"
document.getElementById("two").style.backgroundIma ge = "2.bmp"
--></script>
<table border=1><tr>
<td id="one">info</td>
<td id="two">info</td>
</tr></table>
</body>
не пашет
Ответить с цитированием
  #10 (permalink)  
Старый 11.02.2011, 21:58
Аватар для NoResponse
Профессор
Отправить личное сообщение для NoResponse Посмотреть профиль Найти все сообщения от NoResponse
 
Регистрация: 17.06.2010
Сообщений: 152

"не пашет" - и не должно
скрипт с таблицей местами поменяйте
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Динамическое удаление строк таблицы Tankist Events/DOM/Window 16 03.07.2013 16:42
изменение ширины столбцов таблицы yngwie19 Элементы интерфейса 10 11.11.2009 17:22
Динамическое изменение <input text> baal1988 Events/DOM/Window 4 24.08.2008 17:17
Динамическое изменение границ между столбцами таблицы srgg Элементы интерфейса 3 10.08.2008 14:40
Динамическое изменение размеров изображения Макс Элементы интерфейса 7 21.07.2008 16:55