Getelementbyid

[AbrakadabrA]

Есть таблица с тремя строками и тремя столбцами.
Хочу сделать так чтобы при наведении мыши на любую из трех ячеек в столбце менялся bacrgroundColor всего столбца.
код страницы.

<script>
function action()
{
var element = document.getElementById(this);
element.style.backgroundColor = 'red';
}
</script>
<table width = "900" border = "1" align = "center" bordercolor = "black">
<tr align = "center">
<td id = "item1" onmouseover = "action()">Покупки</td>
<td id = "item2" onmouseover = "action()">Мои средства</td>
<td id = "item3" onmouseover = "action()">Отчет</td>
</tr>
<tr align = "center">
<td id = "item1" onmouseover = "action()"><img src = "../images/shopcart.png" /></td>
<td id = "item2" onmouseover = "action()"><img src = "../images/money.png" /></td>
<td id = "item3" onmouseover = "action()"><img src = "../images/paper.png" /></td>
</tr>
<tr align = "center" height = "20">
<td id = "item1" onmouseover = "action()"></td>
<td id = "item2" onmouseover = "action()"></td>
<td id = "item3" onmouseover = "action()"></td>
</tr>
</table>

Почему то строка "var element = document.getElementById(this);" возвращает null. Из-за этого все это чудо не работает.
Помогите разобраться...

 

[alenkins]

Ну ты силён))) Один id на одной странице может встречаться только один раз.

 

[AbrakadabrA]

ТОЧНО! Блин иногда тупости моей нет предела.
Спасибо огромное, ткнули на тупейшую ошибку. )))

 

[AbrakadabrA]

А как мне тогда поменять бэкграунд нескольких обьектов сразу?

 

[alenkins]

getElementsByClass?

 

[AbrakadabrA]

Не фурычит. Может я что то делаю не так опять?
использую getElementsByClassName.
alert возвращает [object NodeList]

 

[1ive]

Нахрена извращаться?

<script>
function action(id){
var MyDiv = document.getElementById('custJSstyle');
MyDiv.innerHTML = MyDiv.innerHTML+'#'+id+'{background:#ff0000;}';
}
</script>

<style id="custJSstyle"></style>

<table width = "900" border = "1" align = "center" bordercolor = "black">
<tr align = "center">
<td id = "item1" onmouseover = "action('item1');">Покупки</td>
<td id = "item2" onmouseover = "action('item2');">Мои средства</td>
<td id = "item3" onmouseover = "action('item3');">Отчет</td>
</tr>
<tr align = "center">
<td id = "item1" onmouseover = "action('item1');"><img src = "../images/shopcart.png" /></td>
<td id = "item2" onmouseover = "action('item2');"><img src = "../images/money.png" /></td>
<td id = "item3" onmouseover = "action('item3');"><img src = "../images/paper.png" /></td>
</tr>
<tr align = "center" height = "20">
<td id = "item1" onmouseover = "action('item1');"></td>
<td id = "item2" onmouseover = "action('item2');"></td>
<td id = "item3" onmouseover = "action('item3');"></td>
</tr>
</table>

 

[1ive]

Так как функции getElementsByClassName(); на самом деле не существует , она естественно не заработает.
<div class="sp-wrap"><div class="sp-head-wrap"><div class="sp-head folded clickable">Но если есть желание использовать именно её, существует костыль:</div></div><div class="sp-body"><div class="sp-content">

if(document.getElementsByClassName) {

getElementsByClass = function(classList, node) {	
return (node || document).getElementsByClassName(classList)
}

} else {

getElementsByClass = function(classList, node) {			
var node = node || document,
list = node.getElementsByTagName('*'), 
length = list.length, 
classArray = classList.split(/\s+/), 
classes = classArray.length, 
result = [], i,j
for(i = 0; i < length; i++) {
for(j = 0; j < classes; j++) {
if(list[i].className.search('\\b' + classArray[j] + '\\b') != -1) {
result.push(list[i])
break
}
}
}

return result
}
}