[js] odwoładnie do komórek tabeli

witam, mam taki problem, chcę aby po najechaniu myszą na którąś komórkę w wierszu wszystkie komórki w tym wierszu zmieniły kolor. Mam taką tabelkę:

<tr>
	<td id="w1">Obraz</td>
	<td id="w1">Dane</td>
	<td id="w1">Dane</td>
	<td id="w1">Dane</td>
	<td id="w1">Dane</td>
</tr>

Pobieram każdą komórkę przez document.getElementById('w1') ale nie mam pojęcia jak się odwołać do wszystkich elementów i tym samym id.

To jest błąd, bo nie może być dwóch takich samych identyfikatorów...

Zmieniaj tło elementowi tr, td pozostaw przezroczyste.

a nie ma jakiegoś sposobu na zrobienie tego w ten sposób? bo między komórkami mam odstępy, tło tabeli jest inne niż komórek i graficznie to ładnie wygląda :)

var list = document.getElementById('TR_ID').getElementsByTagName('TD');
for (var i = 0; i < list.length; ++i) {
    list[i].style.backgroundColor='red';
}

Bądź też w jakimś jQuery czy innym prototype:

$('TR#TR_ID > TD').each(function(){
    this.style.backgroundColor='red';
});

Gdzie "TR_ID" to id wiersza.

poradziłem sobie w ten sposób:

function zmien(id){
	for(var i=1;i<=6;i++)
		document.getElementById(id+i).style.backgroundColor = '#E2D6D5';
return false;
}
function powrot(id){
	var kolor;
	for(var i=1;i<=6;i++){
		var liczba = id.substr(1,id.length-1);
		if (liczba % 2 != 0){
			kolor='#F2A1E2';}
			else {
			kolor='#EAAACF'; }
		document.getElementById(id+i).style.backgroundColor = kolor;
	}
return false;
}

id komorek to po kolei: w+indeks+nr_komorki
Dzięki za pomoc ;)

@twoj_mistrz_zxc:
Domyślam się, że po całym kodzie HTML masz porozsiewane miliony ID. Pewnie niełatwo to ogarnąć w skryptach, no i sam kod HTML robi się rozlazły. Zapewne prosto w kod HTML powstawiałeś również obsługę zdarzeń onmouseover i onmouseout, co jeszcze pogarsza sytuację.

Chciałbym Ci pokazać alternatywne rozwiązanie. Celowo użyłem w nim tylko bardzo podstawowych technik; normalnie napisałbym to inaczej (prawdopodobnie dodawałbym dynamicznie do wiersza klasę hover, ale by to zrobić porządnie trzeba wprowadzić trochę wyrażeń regularnych). W przykładzie chcę pokazać, że nie trzeba zawsze polegać na ID, gdy chce się dostać do jakiegoś elementu. ID jest dobrym punktem zaczepienia. Warto oznaczyć nim np. całą tabelę. Ale poszczególne wiersze -- po co?

Zobacz, w moim przykładzie wystarczy taki kod HTML:

  <table id="moja_tabela">
    <tr>
      <td>Obraz</td>
      <td>Dane</td>
      <td>Dane</td>
      <td>Dane</td>
      <td>Dane</td>
    </tr>
    <tr>
      <td>Obraz</td>
      <td>Dane</td>
      <td>Dane</td>
      <td>Dane</td>
      <td>Dane</td>
    </tr>
  </table>

Dosłownie taki. Bez onmouseover/out, bez id w każdej komórce i wierszu. I teraz taki skrypt (powinien być umieszczony w zewnętrznym pliku .js i dołączony gdzieś na dole strony, przed </body>):

function zrob_podswietlanie_tabeli(idTabeli) {
  var tabela = document.getElementById(idTabeli);
  if (tabela) {
    var wiersze = tabela.rows;
    for (var i = 0, n = wiersze.length; i < n; i++) {
      var wiersz = wiersze[i];
      wiersz.onmouseover = function() {
        ustawKolorKomórekWiersza(this, '#E2D6D5');
      };
      wiersz.onmouseout = function() {
        ustawKolorKomórekWiersza(this, '#EAAACF', '#F2A1E2');
      };
    }
  }
  function ustawKolorKomórekWiersza(wiersz, kolorNieparzystych, kolorParzystych) {
    if (typeof kolorParzystych === 'undefined') {
      kolorParzystych = kolorNieparzystych;
    }
    var komorki = wiersz.cells;
    for (var i = 0, n = komorki.length; i < n; i++) {
      komorki[i].style.backgroundColor = (i % 2 === 0)
        ? kolorNieparzystych
        : kolorParzystych;
    }
  };
}

zrob_podswietlanie_tabeli('moja_tabela');

W kodzie nie ma wstawionych magicznych liczb oznaczających np. wymiary tabeli -- liczba kolumn i wierszy może być dowolna.

Chciałem Ci dać od razu kod działający jak ten, co wstawiłeś powyżej, więc parę rzeczy może być w nim mało sensownych, bo albo u Ciebie są mało sensowne, albo po prostu czegoś nie wydedukowałem (bo też nie zamieściłeś całego kodu -- nie ma np. onmouseover/out). Np. trochę dziwna wydaje mi się sprawa z funkcją powrot, która u Ciebie daje różne kolory wierszom. Tymczasem jeśli funkcja ma przywrócić poprzedni kolor komórek wiersza, ustawiony np. za pomocą CSS, to można to zrobić inaczej, prościej.

Wstawiłem ten Twój kod ale nie działał. Podejrzewam że dlatego że w pętlach for są 4 parametry. Ale wzorując się na Twoim kodzie, napisałem to po swojemu i działa znakomicie ;) 100 razy lepsze rozwiązanie niż to moje. Dzięki jeszcze raz i pozdrawiam.

twoj_mistrz_zxc napisał(a)

Wstawiłem ten Twój kod ale nie działał. Podejrzewam że dlatego że w pętlach for są 4 parametry.

???

Cztery... parametry...? Chodzi Ci o podstawianie do zmiennej n? Nie, to jest jak najbardziej OK. Nadal są tam 3 instrukcje, jak w każdym innym forze (inicjalizacja; warunek; krok), tyle że inicjalizacja przypisuje wartości dwóm zmiennym, a nie jednej. Takie pętle wykonują się nieco szybciej. W tym kodzie nie ma to żadnego znaczenia, ale już się przyzwyczaiłem, by tak zawsze pisać. To taki... idiom.

Nie widzę w tym kodzie błędów, a testowałem go u siebie. Żebyśmy zobaczyli, co było nie tak, pewnie musiałbyś wstawić cały swój kod. Nie wykluczam, że coś tam jest nie tak, ale stawiałbym na to, że jednak błąd pojawił się przy tym jak to wstawiałeś. Najważniejsze jednak że już sobie poradziłeś i że wszystko działa.

Swoją drogą się nieźle "popisałem" standardem kodowania, raz używając nazwy_funkcji_z_podkreśleniami, a raz notacjiWielbłądziej :D. Cóż, normalnie używam zupełnie innego stylu kodowania...

Każdy ma jakiś swój styl i tego się trzyma ;) I fajnie że są tacy ludzie co chętnie pomagają bo bez nich ciężko by się czegokolwiek nauczyć. Samemu dochodzi się o wiele dłużej do pewnych rzeczy niż jeśli ktoś napisze, a potem samemu się przerabia wg swoich potrzeb. Jeszcze raz serdecznie dziękuje ;)