data gesorteerd invoeren in kolommen in webpagina

[nonono]

Op een html-pagina wil ik een tabel maken, waarin een opsomming van producten alfabetisch wordt weergegeven in kolommen. Ter vergelijking: in Word kan ik eerst een lijst maken van producten, vervolgens alfabetiseren en dan over 2 of meerdere kolommen verdelen. Bestaande lijst wijzigen en vervolgens opnieuw in kolommen weergeven.

Ik kan een html-pagina opmaken met bijv. een 3x3 tabel. Het opvullen van de cellen moet dan in kolom 1 beginnen (van boven naar beneden), dan naar kolom 2 ..etc. In de cel staat dan een verwijzing naar het product. En de producten staan reeds gealfabetiseerd in een soort matrix.

Ik denk, dat het zoiets zou het moeten zijn. Maar hoe verder?
De basis pagina met de tabel aanmaken dat lukt allemaal wel. Maar hoe gaat de koppeling tussen het ophalen en het invoeren van de data?

 

[Frats]

Als je informatie wil kunnen toevoegen en wijzigen zit je niet meer in HTML, dan moet je een PHP script hebben met een filestructuur of een database erachter.

Anders moet je zelf handmatig de .html file editen en de tabel aanpassen, en dan met de hand sorteren. Of je kunt de data handmatig in de .html editen en een javascript gebruiken om de boel te sorteren natuurlijk.

 

[nonono]

PHP heb ik nog niet onder de knie.

Handmatig editen betekent de tabel aanmaken en per cel een verwijzing aangeven naar een javascript file?

 

[Frats]

Nee dat betekent gewoon een html table maken en editen en dan een javascript aan de hele pagina toevoegen die automatisch tabellen sorteert. Als je even zoekt op google vind je er wel een.

 

[nonono]

Bedankt voor je hulp.
Ik ga zoeken en proberen.

 

[That Guy]

Toevallig had ik laatst nog een mooi sort-scriptje gemaakt:[JS]HTMLTableSectionElement.prototype.sort = function(colomnNumber, asc)
{
var i, tmp = [], cols = this.getElementsByTagName('tr'), len = cols.length;

for(i=0; i<len; i++)
{
tmp = [cols.getElementsByTagName('td')[colomnNumber].firstChild.nodeValue, cols];
}

tmp.sort(function(a, b)
{
return a[0] == b[0] ? 0 : asc === true ? a[0] < b[0] ? 1 : -1 : a[0] > b[0] ? 1 : -1;
});

for(i=0; i<len; i++)
{
this.appendChild(tmp[1]);
}
};[/JS]gebruik als volgt:

<table>
   <thead>
      <tr>
         <td>iets</td>
         <td>iets anders</td>
      </tr>
   </thead>
   <tbody id='sorteermij'>

      <!-- hier komt dus de tabel-data -->

   </tbody>
</table>

[JS]var tbody = document.getElementById('sorteermij');

tbody.sort(0, true); // sorteert oplopend op de 1e kolom
tbody.sort(1, false); // sorteert aflopend op de 2e kolom
// etc.[/JS]

 

[nonono]

Ik heb het nog niet werkend met het antwoord uit post #6, maat toch even een vraag.

Het voorbeeld is een tabel met 2 kolommen. Wordt hier per kolom geselecteerd? Bijv. “zzz” bovenaan in kolom 1 en komt onderaan in kolom 1; “aaa” onderaan in kolom 2 en komt bovenaan in kolom 2?

Wat ik wil is: “zzz” onderaan in kolom 2 en “aaa” bovenaan in kolom 1.

 

[That Guy]

Ja, er wordt per kolom geselecteerd (dus: in de 'hoogte', vertikaal)

Wat ik wil is: “zzz” onderaan in kolom 2 en “aaa” bovenaan in kolom 1.

Je kan per kolom aangeven hoe je het wil sorteren; je hebt oplopend (ascending, van a tot z) en aflopend (descending, van z tot a).

Dus ook allebij tegelijkertijd; kolom 1 van a tot z en kolom 2 van z tot a.

 

[nonono]

Per kolom is niet mijn bedoeling. De tabel als geheel moet gesorteerd worden.

Even terug naar het begin van mijn vraag: in Word heb ik een lange lijst met bijv. namen, deze kan ik alfabetiseren en om de lijst korter te maken, kan ik deze over kolommen verdelen.

Als ik dezelfde lange lijst in een 1x1 tabel plaats, dan kan deze kolom inderdaad alfabetisch gesorteerd worden.
Echter een lange lijst in de vorm van een html-tabel is niet praktisch om te lezen. Het is dan prettiger om de lijst uit te voeren als een tabel met meerder kolommen. Maar dan moet de tabel als geheel gesorteerd worden en niet per kolom.
Ik hoop hiermee mijn vraag verduidelijkt te hebben.

 

[nonono]

In post #2 werd gemeld, dat een PHP-script de oplossing zou zijn. Inderdaad.
Na enig zoeken vond ik: HTML tabel bouwen met PHP en MySQL
Een array moet aangemaakt worden en als resultaat wordt een html-pagina gegenereerd.
In het script kan o.a. het aantal kolommen en kolombreedte aangegeven worden.
Het bijgesloten bestand heb ik lokaal geprobeerd (WampServer) en met succes.

HTML tabel bouwen met PHP en MySQL.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>HTML tabel bouwen met PHP en MySQL</title>
</head>
<body>
<?php
$items = array("<b>item  1</b>", "item  2", "item  3", "item  4", 
               "<b>item  5</b>", "item  6","item  7", "item  8", 
               "<b>item  9</b>", "item 10", "item 11", "item 12");

// hulpvariabelen
$aantal_kolommen = 4;
$kolom_breedte   = 75; // in pixels
$aantal_items    = sizeof($items);
$huidige_kolom   = 0; // als deze variabele de waarde 0 heeft dan is er een rij afgelopen
                      // en moet er een nieuwe beginnen

// bouw de tabel en doorloop de items
?>
<br><br><br><br>
<center>
 <table width="<?= $aantal_kolommen * $kolom_breedte ?>" border="1" cellspacing="0" cellpadding="2">
 
<?php
foreach($items as $item) {
  // waren we klaar met een rij ?
  if($huidige_kolom == 0) {
    // open een nieuwe rij
    echo "<tr>\n"; // hier is \n toegevoegd om de leesbaarheid van de HTML-source te verhogen
  }

  // druk het item af - hier zou je dus nog tabellen kunnen nesten - in dit voorbeeld houden we het simpel
  echo "<td width=\"".$kolom_breedte."\">".$item."</td>\n";

  // we zijn een kolom verder, verhoog $huidige_kolom
  $huidige_kolom++;

  // waren we klaar met een rij ?
  if($huidige_kolom == $aantal_kolommen) {
    // sluit de rij af en reset $huidige_kolom
    echo "</tr>\n";
    $huidige_kolom = 0;
  }
}
?>
</table>
</center>
</body>
</html>