tablepress tabellen op een website meer functionaliteit geven

[mispelhage]

hoi,
ik ben bezig mijn website en tabel aan te passen aan de functionaliteit die ik voor ogen heb. Middels css-code heb ik de lay-out aan kunnen passen, foto's en links kunnen toevoegen etc.

zie
https://www.kwekerijlovendaal.nl/plantenlijst/
voor de tabel waar ik aan werk

Waar ik nu mee bezig ben is het mogelijk maken voor bezoekers om rijen te selecteren, om later een soort van boodschappenlijstje mee te maken. Ik heb al zitten stoeien met codes die ik op internet vond, maar het is me nog niet gelukt om zoiets te maken.

Wie kan me in de juiste richting duwen?

 

[Aar]

Moet er nog een actie mee gebeuren, of is het gewoon enkel een vinkje plaatsen zodat ze het zelf kunnen terugzien als of het een to-do papiertje is? In dat geval kan je een checkbox erbij plaatsen.

Als er actie moet plaatsvinden zoals alles opslaan, dan moet je nog een hoop erbij programmeren.

 

[mispelhage]

Als ik een checkboxje bij plaats, dan moet deze kolom door de gebruiker te wijzigen zijn toch? Dat zou kunnen werken

 

[Aar]

Ik heb wat kunnen bouwen:

<table id="mijnTabel">
  <thead>
    <tr>
      <th>Header 1</th>
      <th>Header 2</th>
      <th>Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data 1</td>
      <td>Data 2</td>
      <td>Data 3</td>
    </tr>
    <tr>
      <td>Data 4</td>
      <td>Data 5</td>
      <td>Data 6</td>
    </tr>
    <!-- Voeg meer rijen toe indien nodig -->
  </tbody>
</table>

  var rows = document.getElementById('mijnTabel').getElementsByTagName('tr');

  function selectRow() {
    for (var i = 0; i < rows.length; i++) {
      rows[i].addEventListener('click', function() {
        this.classList.toggle('selected'); // Wissel de 'selected' klasse bij elke klik
      });
    }
  }

  selectRow(); // Roep de functie aan om klikgebeurtenissen toe te voegen aan alle rijen

 /* Stijl voor de geselecteerde rij */
    .selected {
      background-color: yellow; /* Verander naar de gewenste kleur */
    }

Voorbeeld: https://jsfiddle.net/08uob45k/

Je kan gewoon een per <tr> klikken zodat die een eigen CSS stijl krijgt.

 

[mispelhage]

bedankt voor je reactie, ik heb de css-code aangepast naar het volgende, maar krijg het niet aan de praat:

.tablepress thead th {
    font-family: Chilanka;
    font-size: 16px;
    color: white;
    border-radius: 12px 12px 0 0;
}

.tablepress th {
    background-color: #006600;
}

.tablepress {
    font-family: Chilanka;
    font-size: 16px;
}

.tablepress .column-1 {
    font-size: 17px;
}

.tablepress .row-1 .column-1 {
    visibility: hidden;
}

.tablepress .column-1 {
    border-radius: 20px 0 0 20px;
}

.selected {
    background-color: yellow;
}

 

[Aar]

Je moet wel een klik-procedure hebben. Enkel CSS met wat jij hebt is niet voldoende.

 

[mispelhage]

ok, ik heb de klikprocedure toegevoegd (je javascript code van het voorbeeld) aan 'aangepaste opdrachten' codeboxje bij het onderdeel 'Tabel functies voor sitebezoekers' en aangepast. Voor mij ziet dat er nu zo uit:

var rows = document.getElementById('2').getElementsByTagName('tr');

  function selectRow() {
    for (var i = 0; i < rows.length; i++) {
      rows[i].addEventListener('click', function() {
        this.classList.toggle('selected'); // Wissel de 'selected' klasse bij elke klik
      });
    }
  }

is dat wat je bedoelt?
Ik vraag me wel af of we op het juiste oplossingenspoor zitten, uiteindelijk is het de bedoeling om de geselecteerde gele rijen bij elkaar te krijgen. Bijvoorbeeld alle geel geselecteerde rijen bovenaan de totale lijst van ongeveer 400 rijen.

 

[Aar]

Deze oplossing laat enkel de stijlen veranderen van de rijen waarop geklikt wordt.
Er vindt geen andere actie plaats dan dat.

 

[mispelhage]

Als ik een checkbox toevoeg in mijn tabel, de bezoeker op een of andere manier toelaat deze te wijzigen, dan kan daar later op gefilterd worden toch?

 

[Aar]

Ja, dat kan. Zit wel wat werk achter die je mogelijk zelf in een eigen plugin kan bouwen.

 

[mispelhage]

De sport vind ik om met zo weinig mogelijk javascript en CSS toevoegingen de basis functionaliteit van tablepress uit te breiden. Het doel is rijen in een tabel te selecteren die later bij elkaar komen voor een overzichtje. Wie een voorbeeld weet te vinden welke ik kan bestuderen... Dan kan ik daar op verder puzzelen.

 

[Aar]

Dan ontkom je niet aan Javascript en CSS, omdat je meerdere elementen (reeks van td's) wilt aanroepen.
Dus kijk nog eens aandachtig naar mijn voorbeeld. Je kan heel makkelijk erop klikken en het wordt ge-hightlight.

Of wil je een actie hebben dat je ze kan selecteren voor een andere volgorde? Ook dan ontkom je niet aan Javascript, of je moet iets programmeren in PHP die de volgorde andersom zet.

 

[bron]

De sport vind ik om met zo weinig mogelijk javascript en CSS toevoegingen de basis functionaliteit van tablepress uit te breiden.

Wat betreft de browser: HTML is een "markup" taal waarin elementen van linksboven naar rechtsonder worden verwerkt (binnen de ruimte die er is). Bij een klein aantal elementen zoals <video> zit een beetje functionaliteit.
CSS zorgt voor positionering en vormgeving en een klein beetje functionaliteit. JavaScript geeft veel functionaliteit.

 

[mispelhage]

Ja, ik snap inmiddels waar de kale datatabel, CSS en Java voor bedoelt is, het is niet het één of de ander.
Ik heb inmiddels een voorbeeld gevonden in java in een tabel-app: zie https://www.tabulator.info/
De bovenste tabel heeft in de laatste kolom de optie om een vinkje te zetten, vervolgens kan je ook sorteren op dit vinkje. Dit wil ik proberen te maken in de tablepress-app voor mijn website.

 

[Aar]

@mispelhage Java heeft hier niks mee te maken. Het gaat om JavaScript, en dat staat los van Java.

 

[bron]

Je houdt je vast aan, in dit geval virtuele tabellen
Tabellen zijn , zoals in je voorbeeld, bedoeld voor data overzichten,, niet voor de structuur van een pagina.

Google eens op "responsive grid", dan is alleen css nodig, bijvoorbeeld Bootstrap 4 of 5. Wil je hier functionaliteit aan toevoegen dan is het een kwestie van 2 (of 1) JavaScript bestand erbij zetten.

 

[Aar]

@bron Als ik hier kijk dan zie ik toch echt een tabel met tabulaire data.

 

[bron]

Als ik hier kijk dan zie ik toch echt een tabel met tabulaire data.

Klopt. De TablePress plugin zet ook veel inline css in in en om de tabl, daarom lastig om vormgeving aan te passen naar eigen wens.