[JS] Content aanpassen aan formulier*

[Technicality]

Hallo tweakers,

Ik heb nu HTML-CSS-PHP wel een beetje onder de knie, maar wil toch wat doen met DHTML. Dus ik heb als oefenprojectje een boekenlijst voor mijn afdeling op school gekozen.

De bedoeling is dat bij het kiezen van een bepaald profiel:
1) bepaalde keuzes van vrije vakken niet meer kunnen (want dat is IRL gewoon zo)
2) er automatisch een profieldeel (de boeken daarvan) komt te staan op de pagina

en bij keuzes van de vrije-deel vakken er:
1) na 2 vakken geen keuzes meer hebt
2) de boeken van de vakken automatisch in het andere deel komen

Nu is mijn vraag hoe ik het beste content dynamisch kan invoegen en verwijderen. Nu doe ik het met "style.display="none" en dan een hoop GetElementById, maar ik heb het gevoel dat het makkelijker/netter kan.
Ik zat zelf te denken aan een aantal array's en een paar loopjes, maar dan weet ik dus niet hoe ik de inhoud van de arrays kan laten zien of verwijderen van de pagina:

een live-voorbeeld is Hier te vinden, daar staat de volgende JS:

JavaScript:

function check()
{
 var NT = document.getElementById("NT");
 var NG = document.getElementById("NG");
 var EM = document.getElementById("EM");
 var CM = document.getElementById("CM");
 var i = 0

for (i=0;i<document.forms[0].profiel.length;i++)
{
    if (document.forms[0].profiel[i].checked)
    {
        gekozen_profiel = document.forms[0].profiel[i].value
    }
}

NT.style.display="none"
NG.style.display="none"
EM.style.display="none"
CM.style.display="none"

document.getElementById(gekozen_profiel).style.display="block"

switch(gekozen_profiel)
{
     case "NT":
 document.forms[0].filo.disabled=true;
 document.forms[0].filo.checked=false;
 break
     case "NG":
 document.forms[0].filo.disabled=true;
 document.forms[0].filo.checked=false;
 break
     case "EM":
 document.forms[0].filo.disabled=false;
 break
     case "CM":
 document.forms[0].filo.disabled=false;
 break
 } 
}

[ Voor 38% gewijzigd door Technicality op 25-06-2006 18:11 ]

[Verwijderd]

hier kun je heel mooi gebruik maken van de DOM functies van javascript..

bijvoorbeeld hier kun je wat informatie vinden

[ Voor 8% gewijzigd door Verwijderd op 25-06-2006 14:09 ]

[Technicality]

Verwijderd schreef op zondag 25 juni 2006 @ 14:06:
hier kun je heel mooi gebruik maken van de DOM functies van javascript..

bijvoorbeeld hier kun je wat informatie vinden

Met die link kwam ik al een stuk verder

Ik heb nu nog wel een ander probleempje. Ik wil graag de vakken van het profieldeel uit een array halen (dat lukt) en in een tabel zetten (dat lukt niet)

JavaScript:

var Profielvakkentable = document.getElementById('profieldeel')

function removeChildren(node)
{
if (!node) return;
while (node.hasChildNodes()) {
removeChildren(node.firstChild);
node.removeChild(node.firstChild);
}
}
removeChildren(Profielvakkentable)

var boekjes=new Array()
    boekjes[0]="NT1"
    boekjes[1]="NT2"
    boekjes[2]="NT3"

var iboeken = 0
for (iboeken=0;iboeken<boekjes.length;iboeken++)
{
    var Newtablerow = document.createElement('tr');
    var Newtablecell = document.createElement('td')
    var CellText = document.createTextNode(boekjes[iboeken]);
    Newtablerow.appendChild(Newtablecell).appendChild(CellText);
    Profielvakkentable.appendChild(Newtablerow);
}

Dit heeft op één of andere manier tot gevolg dat de tabel steeds lager gaat staan, maar in de DOM inspector handig ding trouwens staat hier niks van? Bovendien faalt deze code te werken in IE?

[ Voor 11% gewijzigd door Technicality op 25-06-2006 17:29 ]

[XWB]

Bovendien faalt deze code te werken in IE?

Ja dat heb ik ook eens gehad, je moet gebruik maken van insertRow() en insertCell().

[Technicality]

Hacku schreef op zondag 25 juni 2006 @ 17:45:
[...]


Ja dat heb ik ook eens gehad, je moet gebruik maken van insertRow() en insertCell().

Fijn is dat, heb ik net alles met aparte vars gedaan, moet ik nu de hele volgorde omdraaien

[frickY]

Let bij een tabel op dat je rijen geen childs zijn van de table, maar van de tbody.
De thead, tbody en tfoot zijn de enigste 3 children van een tabel.

Doe maar eens een;

code:

window.alert(document.getElementsByTagName("table")[0].childNodes[1].tagName)

[Technicality]

frickY schreef op zondag 25 juni 2006 @ 17:55:
Let bij een tabel op dat je rijen geen childs zijn van de table, maar van de tbody.
De thead, tbody en tfoot zijn de enigste 3 children van een tabel.

Doe maar eens een;

code:

window.alert(document.getElementsByTagName("table")[0].childNodes[1].tagName)

Ik was al aan het worstelen, maar het tbody element is toch te benaderen via getElementById('tableid')?

Dus hoe kan ik dan het volgende doen: Ik wil een tabel vullen met de waarden van een geneste array (3 waarden per index), dus zoals dit:

JavaScript:

var boekjes=new Array()
    boekjes[0]=["NT1","Natuurkunde1","NA29"]
    boekjes[1]=["NT2","Natuurkunde2","NA33"]
    boekjes[2]=["NT3","Natuurkunde3","NA32"]

En ik heb deze code erbij:

JavaScript:

var iboeken = 0
for (iboeken=0;iboeken<boekjes.length;iboeken++)
{
Profielvakkentable.insertRow(0)

var iboekeigenschappen = 0

for (iboekeigenschappen=0;iboekeigenschappen<boekjes[iboeken].length;iboekeigenschappen++)
{
    Profielvakkentable.firstChild.insertCell(iboekeigenschappen).appendChild(document.createTextNode(boekjes[iboeken][iboekeigenschappen]));
}
}

volgens mij zou ik dan per keer dat de er een NTboek bestaat (3 keer dus)één tablerow en 3 tablecells moeten krijgen, maar dat krijg ik niet

ik heb het vermoeden dat het ligt aan die firstchild, maar hoe moet ik anders row 0 krijgen?

edit:
op http://www.howtocreate.co.uk/tutorials/javascript/domtables is te lezen dat er een tbodies[0] collection is, met daarin de rows. Maar als ik bovenstaande code vervang door

JavaScript:

var iboeken = 0
for (iboeken=0;iboeken<boekjes.length;iboeken++)
{
Profielvakkentable.insertRow(0)

var iboekeigenschappen = 0
for (iboekeigenschappen=0;iboekeigenschappen<boekjes[iboeken].length;iboekeigenschappen++)
{
    Profielvakkentable.tbodies[0].rows[0].insertCell(iboekeigenschappen).appendChild(document.createTextNode(boekjes[iboeken][iboekeigenschappen]));
}
}

Gebeurt er nog niks. De error die ik krijg is "Profielvakkentable.tbodies has no properties". Wat is er mis?
Dit werk dus wel, maar met bovengenoemde probs:

JavaScript:

var iboekjes = 0
for (iboekjes=0;iboekjes<boekjes.length;iboekjes++)
{
document.createTextNode(boekjes[iboekjes]);
var newRow = document.createElement('tr')
var iboekeigenschappen = 0
for (iboekeigenschappen=0;iboekeigenschappen<boekjes[iboekjes].length;iboekeigenschappen++)
{
var newCell = document.createElement('td')
var Celltext = document.createTextNode(boekjes[iboekjes][iboekeigenschappen])
newCell.appendChild(Celltext)
newRow.appendChild(newCell)
}
Profielvakkentable.appendChild(newRow)
}

Waar komt dat sterretje achter de topictitel vandaan?

[ Voor 82% gewijzigd door Technicality op 25-06-2006 19:49 ]

[kunnen]

Technicality schreef op zondag 25 juni 2006 @ 18:03:
[...]


Waar komt dat sterretje achter de topictitel vandaan?

Dat wil zeggen dat een moderator je titel heeft aangepast

[frickY]

Sterretje is volgens mij als n modje de titel heeft aangepast.

Ik snap je bovenstaande code niet.
Op regel 4 maak je een textnode, waar je niets mee doet?
Daarbij zie ik je ook maar 1 rij aanmaken. Let erop dat je met verwijzingen naar de DOM werkt, en niet meer losse elementen welke je in de DOM toevoegt. Je overschijft je nieuwe rij dus steeds met een andere cell, en op regel 14 append je die rij met de gegevens uit het laatste loopje (die eerdere loops heeft overschreven), aan de table.

Voeg je regel 5 (create tr) in je loop, en vervang regel 14 met Profielvakkentable.childNodes[0].appendChild(newRow); zoals ik al eerder aangaf.
Alert her en der eens de tagName van het attribuut waar je mee werkt zodat je kunt zien waar je daadwerkelijk mee werkt.

[Technicality]

frickY schreef op zondag 25 juni 2006 @ 19:58:
Sterretje is volgens mij als n modje de titel heeft aangepast.

Ik snap je bovenstaande code niet.
Op regel 4 maak je een textnode, waar je niets mee doet?
Daarbij zie ik je ook maar 1 rij aanmaken. Let erop dat je met verwijzingen naar de DOM werkt, en niet meer losse elementen welke je in de DOM toevoegt. Je overschijft je nieuwe rij dus steeds met een andere cell, en op regel 14 append je die rij met de gegevens uit het laatste loopje (die eerdere loops heeft overschreven), aan de table.

Voeg je regel 5 (create tr) in je loop, en vervang regel 14 met Profielvakkentable.childNodes[0].appendChild(newRow); zoals ik al eerder aangaf.
Alert her en der eens de tagName van het attribuut waar je mee werkt zodat je kunt zien waar je daadwerkelijk mee werkt.

Regel 4 was nog wat codejunk .

JavaScript:

alert(Profielvakkentable.childNodes[0].tagName)

Geeft

Fout: Profielvakkentable.childNodes[0] has no properties
Bronbestand http://www.technicality.nl/boek.php
Regel 118

Wat ik dacht te doen is het volgende (wat ook werkt in FF, met die extra whitespace en niet in IE):

JavaScript:

var iboekjes = 0; //maak een variable iboekjes (integer dus) om de loop mee te doen:
for (iboekjes=0;iboekjes<boekjes.length;iboekjes++) //doe een for loop met de iboekjes zolang iboekjes minder is dan de lengte van de array boekjes (in dit geval 3, nt1/2/3)
{
    var newRow = document.createElement('tr') //deze var maakt een nieuwe rij aan
    var iboekeigenschappen = 0;   //maak een variable iboekeigenschappen (die dus uiteindelijk de 2e index van de array wordt)
    for (iboekeigenschappen=0;iboekeigenschappen<boekjes[iboekjes].length;iboekeigenschappen++) //zolang iboekeigenschappen minder is dan de length in de array boekjes[iboekjes], for loop
    {
        var newCell = document.createElement('td') //maak var voor tablecell aan
        var Celltext = document.createTextNode(boekjes[iboekjes][iboekeigenschappen]) //maak een tekst aan met de huidige iboekeigenschappen index, dus bijv. boekjes[1][2]
        newCell.appendChild(Celltext)//append de tekst aan de cell
        newRow.appendChild(newCell)//append de cell aan de nieuwe row, imo automatisch aan het eind (weet ik niet zeker)
    }
    Profielvakkentable.appendChild(newRow) //append de row aan aan de tabel (dito, imo aan het eind)
}

EDIT: Woei een oplossing. Ik heb handmatig een tbody en thead toegevoegd en nu werkt het met een id op de tbody

[ Voor 15% gewijzigd door Technicality op 25-06-2006 23:23 ]