[js] Dynamisch links plaatsen

[Jigs]

Ik heb op het moment het volgende script:

code:

function myHref()
{
    
    if (document.getElementsByTagName) {
        var cells = document.getElementsByTagName('td');
        var numCells = cells.length;
        
        for (var i = 0; i < numCells; ++i) {
            if ('isEvent' == cells[i].className) {
                cells[i].style.backgroundColor = '#FF0000';            
            }
        }
    }
}

Op dit moment wordt een td-tje met de class: "isEvent" vervangen met een rode background-color.
Nu wil ik dat ip de background rood wordt de inhoud van de td een linkje wordt. Dus <a href"">. Heeft iemand een idee hoe ik dit klaar kan spelen?

[.oisyn]

P&W FAQ - HTML / javascript / css, etc...

PW -> WG

[BtM909]

Als je ipv backgroundcolor color gebruikt?

Ik zie je trouwens nergens een linkje genereren, handiger is om daar meteen de juiste class eraan te koppelen?

[Jigs]

nu is het idd color maar het moet een linkje worden.
Dus in de td met de class: "isEvent" moet een linkje worden gezet. Zeg bijvoorbeeld: www.tweakers.net

[André]

Ongeveer zo kun je het doen:

code:

if ('isEvent' == cells[i].className)
{
  tekst = cells[i].innerHTML;
  cells[i].innerHTML = "";
  link = document.createElement("a");
  link.href = "http://www.blaat.com";
  link.innerHTML = tekst;
  cells[i].appendChild(link);
  cells[i].style.backgroundColor = '#FF0000';            
}

Eventueel vervang je de innerHTML met DOM functies

[Sappie]

mbv DOM scripting is dat bijv te doen:

code:

temp_text = cells[i].firstChild.data; // ga ervanuit dat er direct tekst in je td staat
cells[i].removeChild(cells[i].firstChild);
link = document.createElement("A");
textNode = document.createTextNode(temp_text);
// set hier evt nog wat attributes van de link (href, etc )
link.appendChild(textNode);
cells[i].appendChild(link);

et voila.. tis vast niet 100% goed, maar moet je een eind op weg helpen. Verder zou ik wat basic javascript tutorials lezen, dan wist je dit wel

Ook zou je gebruik kunnen maken van innerHTML, maar daar lees je vast meer over in die tutorials

edit:
Andre was net ffkus sneller

[ Voor 7% gewijzigd door Sappie op 11-05-2005 15:57 ]

[Jigs]

André schreef op woensdag 11 mei 2005 @ 15:53:
Ongeveer zo kun je het doen:

code:

if ('isEvent' == cells[i].className)
{
  tekst = cells[i].innerHTML;
  cells[i].innerHTML = "";
  link = document.createElement("a");
  link.href = "http://www.blaat.com";
  link.innerHTML = tekst;
  cells[i].appendChild(link);
  cells[i].style.backgroundColor = '#FF0000';            
}

Eventueel vervang je de innerHTML met DOM functies

He bedankt dit lijkt bij mij goed te werken. Alleen wil ik nu zorgen dat de link variabel is bij elke td. Hoe kan ik dat het beste implementeren?

[André]

Je vervangt de inhoud van alle TD's met de class isEvent met een link, en de href van die link is dan elke keer anders?

Je zou die href uit een array kunnen halen:

code:

sites = ["http://www.bla.nl", "http://www.google.com"];

En dan in je loop:

code:

link.href = sites[i];

[Jigs]

André schreef op woensdag 11 mei 2005 @ 16:13:
Je vervangt de inhoud van alle TD's met de class isEvent met een link, en de href van die link is dan elke keer anders?

Je zou die href uit een array kunnen halen:

code:

sites = ["http://www.bla.nl", "http://www.google.com"];

En dan in je loop:

code:

link.href = sites[i];

Ja dat zou het handgiste zijn als die links een vaste lijst met links was. Maar deze is ook variabel. En die zou via php moeten worden aangestuurd.

[BtM909]

Jigs schreef op woensdag 11 mei 2005 @ 16:26:
[...]


Ja dat zou het handgiste zijn als die links een vaste lijst met links was. Maar deze is ook variabel. En die zou via php moeten worden aangestuurd.

Een heel klein beetje gedachten-spinsel vanuit jou moet toch wel lukken

[Jigs]

Ok ik zal het wat duidelijker proberen uit te leggen.
Het gaat hier om een kalener. Die gemaakt is in php en via een template engine naar html wordt geparsed. Nu, als er op een bepaalde datum een event is moet van die datum een linkje en kan ik naar een detail pagina van die link. Het is de bedoeling dat die linkjes via JavaScript woren gemaakt. Elke datum heeft zeg maar een ander linkje en dat is voor elke maand weer anders..

[André]

Jigs schreef op woensdag 11 mei 2005 @ 16:26:
[...]


Ja dat zou het handgiste zijn als die links een vaste lijst met links was. Maar deze is ook variabel. En die zou via php moeten worden aangestuurd.

Dan schrijf je die array toch met php?

[Jigs]

Ja maar kan ik die dan meegeven in een javascript aanroep?

[DizzyWeb]

Je kan de javascript toch met PHP outputten?

[Jigs]

Ok....
Hoe dan?

[Pelle]

Andre, kap er nou eens met met innerHTML te promoten

[André]

Pelle schreef op donderdag 12 mei 2005 @ 15:15:
Andre, kap er nou eens met met innerHTML te promoten

Ik adviseer toch ook de innerHTML te vervangen met DOM methodes

[André]

Jigs schreef op donderdag 12 mei 2005 @ 14:52:
Ok....
Hoe dan?

Zo:

PHP:

<?php echo "sites = ['http://www.bla.nl', 'http://www.google.com'];"; ?>