Доброе время суток.
Есть такая страничка:
<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, но это свойство пустое
.
Заранее спасибо за оказанную помощь.