javascript tr

Zdravim,

potreboval bych do promenne nacist vsechny tr (radky tabulky) na cele strance..

muj zamer je takovy ze bych potreboval nejaky univerzalni script ktery mi na strance udela u vsech <tr> takovou upravu, ze po najeti mysi na radek se radek zbarvi a po odjeti mysi zase vrati na puvodni barvu.. dekuji za rady..
Tak to je špatný přístup. Funkce onMouseOver() a onMouseOut() ti nestačí?

Pokud by to měly být odkazy, tak to lze i bez Javascriptu:
http://www.wellstyled.com/css-nopreload-rollovers.html

Pokud bys trval na původním návrhu, tak ti pomůže funkce getElementsByTagName():
http://www.ondrejbrandejs.cz/javascript/?x=getelementsbytagname
Bohatě ti postačí funkce getElementsByTagName(), každému elementu potom přidáš vhodnou funkci na událost onmouse..(), jak už napsal Kit.

např:

elements = document.getElementsByTagName("tr");
if(elements)
{
for (var i = 0; i < elements.length; i ++)
{
//uprava elements[i]
elements[i].onmouseover = function() {obarvi()};
elements[i].onmouseout = function() {zrus()};
}
}

___
ehm.. tak když jsem si zpětně přečetl i text u odkazů, které Kit vložil, tak je můj příspěvek asi zbytečný.. přesto je mi líto ho smazat :)
Freeze: Byla by ho škoda.
dekuji vsem snad z toho neco dam dohromady, potrebuji to protoze to potrebuji dosadit jiz do hotove aplikace a doplnovat ke kazdemu tagu tr onmouseover a onmouseout by bylo hrozne prace... takhle dam do indexu nejakej universalni script ktery mi promeni vsechny radky tabulky tak jak potrebuji..
tak prece jenom mam problem.. zkousim to a nejde mi to.. nasel jsem asi chybu ale nevim proc to tak je..

tohle:

elements = document.getElementsByTagName('tr');
document.write(elements.length);

mi vypise 0, pritom tam tagy tr urcite jsou a nekolik...
Musíš si dát pozor, že DOM funkce (jak getElementsByTagName, tak i např. getElementById a další..), které pracují s obsahem, jsou korektně funkční až ve chvíli, kdy je stránka celá načtena -- takže tenhle skript pro přidání onmouse.. událostí je potřeba volat až poté, po načtení stránky. Nejjednodušším řešením je vytvořit např. nějakou funkci init(), kterou zavoláš při onload, např: <body onload="init()">..</body>.
moc cena rada. dekuji.. jdu na to a pak se podelim.. ;-)
tak sem to zmakl...

toto upravi vsechny radky tabulky s ideckem table-1 (<table id="table-1">):

<script type="text/javascript">
function ini() {
elements = document.getElementsByTagName('table');
if(elements)
{
for (var i = 0; i < elements.length; i ++)
{
if(elements[i].id == 'table-1') {
elem = elements[i].getElementsByTagName('tr');
if(elem)
{
for (var x = 1; x < elem.length; x ++)
{
elem[x].setAttribute('onmouseover', "this.style.background = 'lightblue'");
elem[x].setAttribute('onmouseout', "this.style.background = 'white'");
}
}
}

}
}
}
</script>


a toto upravi vsechny radky ve vsech tabulkach na strance:

<script type="text/javascript">
function ini() {
elem = document.getElementsByTagName('tr');
if(elem)
{
for (var x = 1; x < elem.length; x ++)
{
elem[x].setAttribute('onmouseover', "this.style.background = 'lightblue'");
elem[x].setAttribute('onmouseout', "this.style.background = 'white'");
}
}
}
</script>


vsem dekuji za pomoc a nezapomente na to co psal Freeze celou funkci ini() musite zavolat az po nacteni cele stranky cili nejlepe <body onload="ini();">

dobrou noc...
Jen takovou třešničku. Kdyby si to chtěl někdo vylepšit :)
Inicializaci lze provést i neinvazně. Pak není potřeba zápisu <body onload="init()">

window.onload = function () {
if (!document.getElementsByTagName) { return false; }

// zde uvedeny kod z funkce ini()

}
zdravicko, jak sme tady resili tu funkci, ted jsem zjistil ze nefunguje v IE 8. netusite proc ?

zde prikladam konkretni kod:

<script type="text/javascript">
function ini() {
elements = document.getElementsByTagName('table');
if(elements)
{
for (var i = 0; i < elements.length; i ++)
{
if(elements[i].id == 'table-1') {
elem = elements[i].getElementsByTagName('tr');
if(elem)
{
for (var x = 1; x < elem.length; x ++)
{
//uprava elements[x]
if(elem[x].className == 'odd') {
elem[x].setAttribute('onmouseover', "this.style.background = 'lightblue'");
elem[x].setAttribute('onmouseout', "this.style.background = 'white'");
}
else {
elem[x].setAttribute('onmouseover', "this.style.background = 'lightblue'");
elem[x].setAttribute('onmouseout', "this.style.background = '#eee'");
}
}
}
}

}
}
}
</script>
elem[x].setAttribute('onmouseover', "this.style.background = 'lightblue'");

Tento zápis není zrovna šťastný. Pro definování události je lepší to inicializovat přímo a ne přes atribut. Navíc v CSS se barva pozadí definuje přes background-color.
Takže:

elem[x].onmouseover = function () { this.style.backgroundColor = 'lightblue'; }


Když něco nefunguje jak má, tak většinou používám "debugovací echo". V javascriptu je to alert('Prošlo'); Pokud se zobrazí, tak tam prošel, pokud ne, tak se to někde zaseklo. Stejně tak tímto můžeš zobrazit obsah proměnné.
tak jsem to opravil, ale nefunguje to.. v mozile a opere jo ale IE 8 nic..
<HTML>Zkus se mrknout na metodu captureEvents. IE8 z nějakého důvodu odchytávání událostí nemá normálně povoleno, musí se mu to ručně vysvětlit:

if (window.captureEvents) { // test, zná-li prohlížeč tu funkci, pokud ano, zapneme odchyt událostí
window.captureEvents(Event.ONMOUSEOVER);
window.captureEvents(Event.ONMOUSEOUT);
}

Třeba to zabere. Nebo to zabere s document místo window. Nebo to nezabere vůbec.</HTML>
tak bohuzel ani toto nefunguje... napada nekoho jeste neco ? ja hledam na netu jak divej, ale nic..