[javascript] onmouseover+background, maar dan verticaal

[henkbiertank]

Wie wil mij helpen?

Ik heb het hele internet afgezocht, maar helaas zonder succes. Toen ik de pagina zag dat ik bij de laatste pagina van internet was, gaf ik op .

Wat ik namelijk heb / wil, is het volgende:
Ik heb een tabel, waarbij de data uit een database komt. Om de gegevens 'makkelijk' te kunnen lezen, heb ik voor de <tr> onmouseover gebruikt.

Nu komt het leuke! Dit wil ik ook verticaal...

Ik heb al allerlei dingen geprobeerd, maar zonder succes. Ik moet er wel bij vertellen dat ik niet bijzonder veel verstand heb van javascript. Alvast bedankt.

[Borizz]

Dit is zeker mogelijk met javascript, maar he tis niet zo makkelijk als een mouseover op een table-row. De tabellen in HTML zijn nogal row georiënteerd... Wat je in javascript moet maken is het volgende:

Wanneer je over een bepaalde cel in een kolom heen gaat met de muis, moet je alle cellen van die kolom met javascript opzoeken (of je zet ze vantevoren in een array, afhankelijk van hoe dynamisch het script moet zijn). Op al die cellen pas je dan een andere achtergrond toe, of iets anders om duidelijk te maken dat je in die kolom zit. onmouseout van die bepaalde cel doe je vervolgens het tegenovergestelde.

Ik heb hieronder snel een functie geschreven om de achtergrond van een kolom aan te passen.

JavaScript:

var table = document.getElementById('tableId');
function hilightColumn(nr) {
  var tr;

  // for all rows in the table
  for(var i=0;i< table.childNodes.length; i++) {
    tr = table.childNodes[i]; // get table row
    tr.childNodes[nr].style.backgroundColor = 'red';  // set background color to red
  }
}

Het enige wat je in de code dan zou moeten doen is op elke cel een onmouseover zetten:

HTML:

<td onmouseover="hilightColumn({kolom nummer});">test</td>

Dit kan je echter ook dynamisch door javascript laten doen.

[ Voor 39% gewijzigd door Borizz op 14-05-2006 19:38 ]

[Verwijderd]

col elementen kan je ook gewoon stylen

[JHS]

Misschien niet de meest ideale oplossing: Geef alle TR elementen in een kolom een klasse mee, zoals kolom1. Bij een onmouseover verander je vervolgens de background property van de desbetreffende kolomklasse.

[Verwijderd]

Je kan een colgroup met col elementen definieren voor een table. Dan kan je vast ook wel een mouse-over effect er aan toevoegen. Werkt geloof ik alleen maar in Internet Explorer...

edit: Getest en de property bgcolor werkt inderdaad alleen in IE en niet in FF op een col element (ook zo beschreven in de specificaties). Maar met css kan je de background-color wel gewoon declareren op een col. Helaas kan je mouse-over niet op de col plaatsen, dus moet je het op alle td's in de kolom zetten, jammer.

[ Voor 51% gewijzigd door Verwijderd op 14-05-2006 19:47 ]

[PierreAronnax]

Kijk hier eens: [rml]crisp in "[ JS] Cell nummer van tabel waarover de m..."[/rml]

[Yoozer]

Verticaal is inderdaad lastig omdat je daar geen rijenstructuur hebt. Wat je moet doen is het volgende:

- bij het afvuren van het mouseover-event op de TD kijken welke TD het is (de hoeveelste van de parent TR)
- vervolgens dit index-getal gebruiken om op elke volgende TR op de TD met hetzelfde nummer een kleurverandering te doen.

Kijk eens naar http://www.onlinetools.org/articles/unobtrusivejavascript/ - zie hoe je daar de nummers van opzoekt.

(holy shit, wat een buts replies opeens )

[ Voor 6% gewijzigd door Yoozer op 14-05-2006 19:32 ]

[André]

Om het script van Yoozer te versnellen zou je eerst een referentie naar elke cel in een araay kunnen zetten zodat bij een onmouseover je sneller de andere cellen ook kunt highlighten.

[henkbiertank]

Bedankt mensen!

Dankzij de reactie van PierreAronnax is het gelukt.

http://gathering.tweakers.net/forum/view_message/24234963