Réarrangement aléatoire des cellules d'une table

Question

J'ai un tableau HTML et la table contient 100 lignes et 2 colonnes (200 cellules). Je voudrais que les cellules soient réarrangées aléatoirement par rapport à la ligne d'origine ET/OU à sa colonne d'origine.

Voici comment je représenterais 4 éléments de données. Je n'utilise que du HTML et du CSS. J'ai l'intention d'entrer manuellement le contenu de chaque cellule.

Les données représentent des images pour une galerie sur laquelle je travaille. Veuillez suggérer une autre opinion si je ne devrais pas utiliser des tables pour un tel arrangement.

Answer 1

Il n'est pas nécessaire d'utiliser une table pour ce type d'objectif. Cependant, pour faire n'importe quoi au hasard sans que vous soyez assis devant votre ordinateur en lançant un dé et en tapant le résultat, vous devrez utiliser du JavaScript. Au bas de la page, mettez quelque chose comme ceci:

<script> 
    var images = document.getElementsByTagName('img'); 
    var randomArrangement = []; 

    for (var i=0; i < images.length; i++) 
    { 
     if (Math.random() > 0.5) { 
      randomArrangement.push(images.src); 
     } else { 
      randomArrangement.unshift(images.src); 
     } 
    } 

    for (var j=0; j < images.length; j++) 
    { 
     images[i].src = randomArrangement[i]; 
    } 
</script> 

Cela vous donnera un tableau de URL de vos images dans un ordre aléatoire, et remplir chacun dans les images existantes. Cependant, cela sera beaucoup plus efficace si vous le faites côté serveur avant le chargement de la page.