Динамическое изменение 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, но это свойство пустое :(. Заранее спасибо за оказанную помощь. |
И вообще насколько верно я обрабатываю событие нажатия на ячейку TH? Может есть другой более верный/простой способ?
|
Цитата:
<tag style="…">…</tag> Для обращения к вычисленным стилям получайте объект computedStyle (currentStyle в IE). Цитата:
|
Спасибо за подсказку, вот исправил:
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, подскажите почему... Цитата:
Есть ли возможность сделать так, чтобы при нажатии на очередной TH, стиль в "уже нажатой" (посещенном) ячейке изменялся на базовый, т.е. опять возвращался в url(c-red.gif);? |
Цитата:
Цитата:
Цитата:
|
Большое спасибо за замечания и советы. Все получилось!
|
подскажите и че тут не так?
в <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>-шек |
document.getElementById("....").style.backgroundImage = "1.bmp"
|
<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> не пашет |
"не пашет" - и не должно
скрипт с таблицей местами поменяйте |
| Часовой пояс GMT +3, время: 21:00. |