Dynamische tabel in HTML

[DedSec85]

Beste Tweakers,

Momenteel ben ik een webpagina aan het maken welke een scoreformulier bevat. De bedoeling is dat men wat behaalde scores kan invullen, na het klikken op de 'verzend' button worden de scores verstuurd.
De pagina zelf heb ik gemaakt met HTML, de opmaak met CSS en het mail-stukje met PHP.

Nu is er één dingetje waar ik niet echt uitkom. Het formulier bevat een drop-down box waar men kan aangeven of er vier of vijf spelers meedoen. Zie:

code:

<select name="type_poule" required>
                    <option selected value="type_poule" disabled>Type poule</option>
                    <option value="5_spelers">5 spelers</option>
                    <option value="4_spelers">4 spelers</option>
                </select>

Vervolgens staat er onder aan de pagina een tabel voor elk potje dat gespeeld is. Bij vier spelers moet er één potje extra gespeeld worden, dus moet er een tabel bijkomen.

Hoe kan ik er nu voor zorgen dat als de value 4_spelers is, dat er nóg een tabel bij komt voor het extra potje?

Ik lees op internet dat je dan met Javascript/jQuery etc. aan de gang moet. Andere verwijzen weer door naar betaalde plugins etc. Het lijkt mij dat dit ook met HTML(5) moet kunnen toch? Of kom ik toch op iets als Javascript uit?

Greetz,
DedSec85

[NMe]

Je wil op basis van een selectie je content aanpassen? Dat ga je niet kunnen doen zonder javascript, nee.

[Verwijderd]

Javascript inderdaad. Jquery maakt wel e.e.a. makkelijker. Je zou je extra tabelltje met css standaard kunnen laten hiden en iets als volgende kunnen doen? Even uit mijn hoofd..

code:

$(function() {
  $('#id_van_je_select').on('change', function() {
    if(this.value == '4_spelers'){
      $('#id_van_je_extra_tabel').show();
    }else{
      $('#id_van_je_extra_tabel').hide();
    }
  });
});

[ Voor 7% gewijzigd door Verwijderd op 12-02-2015 17:06 ]

[NMe]

Verwijderd schreef op donderdag 12 februari 2015 @ 17:05:
Jquery maakt wel e.e.a. makkelijker.

Oh? Really? Is dit zo veel lastiger?

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('id_van_je_select').addEventListener('change', function(e) {
    if (e.target.value == '4_spelers') {
      document.getElementById('id_van_je_extra_tabel').style.display = 'none';
    } else {
      document.getElementById('id_van_je_extra_tabel').style.display = 'block';
    }
  });
});

Je gaat voor dit soort simpele meuk toch niet een heel framework includen?

[HamuNaptra]

Je content aanpassen gaat echt niet zonder javascript, maar als je gewoon content wil verbergen dan kan dit makkelijk met alleen CSS.

Aan de hand van pseudo classes kan je reageren op de 'state' van een element.

Ik zou je select weghalen en vervangen door 2 option elementen, een voorbeeld kan je hier vinden: http://code.stephenmorley...he-negation-pseudo-class/

[NMe]

HamuNaptra schreef op donderdag 12 februari 2015 @ 17:37:
Ik zou je select weghalen en vervangen door 2 option elementen, een voorbeeld kan je hier vinden: http://code.stephenmorley...he-negation-pseudo-class/

Dat zijn geen option-elementen maar gewoon inputs. En die uitleg is leuk en aardig maar werkt alleen als die table direct na die input terecht moet komen en dat lijkt me gezien de omschrijving van de TS héél sterk.

[HamuNaptra]

Dit is maar _een_ voorbeeld. Met correct gebruik van id/classes kan dit er helemaal anders uitzien, ik geef enkel de aanzet hier.

[.oisyn]

NMe schreef op donderdag 12 februari 2015 @ 17:17:
[...]

Oh? Really? Is dit zo veel lastiger?

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('id_van_je_select').addEventListener('change', function(e) {
    if (e.target.value == '4_spelers') {
      document.getElementById('id_van_je_extra_tabel').style.display = 'hidden';
    } else {
      document.getElementById('id_van_je_extra_tabel').style.display = 'block';
    }
  });
});

Je gaat voor dit soort simpele meuk toch niet een heel framework includen?

Blijkbaar wel, want dan maak je de fout niet dat het display:none moet zijn

[NMe]

HamuNaptra schreef op donderdag 12 februari 2015 @ 17:41:
Dit is maar _een_ voorbeeld. Met correct gebruik van id/classes kan dit er helemaal anders uitzien, ik geef enkel de aanzet hier.

Mijn punt is dat je met CSS alleen niet op basis van een element bovenaan je pagina de styling van een element onderaan op je pagina kan aanpassen, tenzij je ze in HTML bij elkaar zet en op de een of andere manier met positions/floats uit elkaar trekt. Dat dat nogal onnodig is (en bovendien lastiger te onderhouden omdat het complexer is) moge duidelijk zijn.

.oisyn schreef op donderdag 12 februari 2015 @ 18:56:
[...]

Blijkbaar wel, want dan maak je de fout niet dat het display:none moet zijn

In my defense: ik had er eerst visibility staan. Ik heb het even aangepast in mijn post, thanks.

[Verwijderd]

NMe schreef op donderdag 12 februari 2015 @ 17:17:
[...]

Oh? Really? Is dit zo veel lastiger?

JavaScript:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('id_van_je_select').addEventListener('change', function(e) {
    if (e.target.value == '4_spelers') {
      document.getElementById('id_van_je_extra_tabel').style.display = 'none';
    } else {
      document.getElementById('id_van_je_extra_tabel').style.display = 'block';
    }
  });
});

Je gaat voor dit soort simpele meuk toch niet een heel framework includen?

Ja, toch wel. Men komt er vaak toch snel achter dat ze andere functionaliteiten wensen en het uiteindelijk toch wel gaan gebruiken. In het kader van standaardisatie, doe het dan gelijk goed.

Neemt niet weg dat ik heb gezegd dat het het makkelijker maakt, maar niet onmogelijk zonder jQuery.

That said; het is ook gewoon zo'n standaard dat je je er inmo niet voor hoeft te schamen om zoiets per definitie al te gebruiken.

[R4gnax]

NMe schreef op donderdag 12 februari 2015 @ 17:17:
[...]

Oh? Really? Is dit zo veel lastiger?

Lastiger niet; wel een stuk minder compleet dan wat jQuery doet.

Zo valt IE8 en lager met jouw native oplossing overboord wegens gebrek aan de addEventListener API, waar jQuery automatisch overschakelt op de oude IE-only attachEvent API.

Zelfde geldt voor het DOMContentLoaded event dat ook niet overal ondersteund wordt. Verder zal code die je daarin plaatst ook niet uitvoeren als deze async geladen wordt en het feitelijke event al gepasseerd is. jQuery bevat een hele bult code (in de orde van A4tjes) om hun speciale 'ready' constructie daar allemaal wel mee om te laten gaan.

Je vergelijkt dus gewoon appels met peren.

[NMe]

Die orde van A4-tjes is precies de reden dat ik het nergens op vind slaan om voor een site die alleen dit stukje javascript nodig heeft heel jQuery te gaan includen. Heden ten dage IE8 nog supporten slaat nergens op, daar steek je alleen moeite in als dat een heel specifieke wens van je klant is en die er extra voor wil betalen.

[Verwijderd]

Dit is ook gewoon offtopic.
Er leiden meerdere wegen naar Rome en ieder heeft zo z'n voorkeur. Overal is wel wat van te zeggen. Met meerdere oplossingen is de TS ongetwijfeld geholpen. Dit gaat wel wat ver.

[R4gnax]

NMe schreef op vrijdag 13 februari 2015 @ 09:42:
Die orde van A4-tjes is precies de reden dat ik het nergens op vind slaan om voor een site die alleen dit stukje javascript nodig heeft heel jQuery te gaan includen. Heden ten dage IE8 nog supporten slaat nergens op, daar steek je alleen moeite in als dat een heel specifieke wens van je klant is en die er extra voor wil betalen.

Jij zegt 'heel jQuery', ik zeg 'een fractie van één jpeg foto'.

En je kunt het gerust breder trekken dan enkel IE8 issues. Er zijn bergen aan Webkit bugs waar jQuery ook workarounds voor bevat. Sterker nog; jQuery bevat bij monde van de huidige hoofdontwikkelaar zelfs meer workarounds voor Webkit dan welke andere browser engine ook en het grootste gedeelte gaat ook niet op korte tijd kunnen verdwijnen, mede dankzij het zwaar gefragmenteerde en op punten sterk verouderde landschap van mobile Webkit in tablets en smartphones.

Zodra je iets meer scripting dan dit kleine stukje moet hebben kan een goede standard DOM library die om al die problemen heen werkt ineens toch wel heel gewenst zijn. Dus doe het dan gelijk goed.