Générer une grille dynamique et remplir les cellules sélectionnées

Question

Je veux générer une grille où les gens peuvent sélectionner une ou plusieurs cellules, puis les enregistrer dans la base de données dans ce format (ligne, cellule):

18,27 18,28 19,27 19,28 

Je vouloir générer la grille et en même temps marquer les cellules qui ont été sélectionnées. J'ai réussi à le faire (voir ci-dessous) mais ça ne me semble pas correct. Aussi j'ai besoin d'obtenir la couleur pour le champ de la base de données de sorte que la cellule semble différente pour chaque utilisateur.

Voilà comment je produis la grille et le remplir:

include 'connect.php'; 

$result = mysql_query("SELECT cus_pixels FROM customers"); 

while($row = mysql_fetch_array($result)) { 

    $string .= $row['cus_pixels']." "; 

} 

$pixels = explode(' ', $string); 

$a = 0; 

while ($a <= 40) { 

    echo "<tr>"; 

    $b = 0; 

    while ($b <= 60) { 

     if (in_array($a.','.$b, $pixels)) { 

      echo '<td class="occupied"></td>'; 

     } else { 

      echo '<td class="pixel"></td>'; 

     } 

     $b += 1; 
    } 

    echo "</tr>"; 

$a += 1; 

} 

Comment puis-je générer à la fois la grille, remplir les cellules qui sont occupées et les colorer individuellement. Je suis vraiment coincé ici.

Answer 1

Vous pouvez définir la classe ou l'ID de table pour avoir les propriétés "pixel" par défaut. Ensuite, vous auriez seulement besoin de spécifier les classes "occupées".

ex) <table id="gridTable">..<td> au lieu de <table>..<td class="pixel">

Si vous pouvez utiliser jquery (javascript), alors vous pouvez l'utiliser en même temps que les sélecteurs CSS pour changer les classes de vos cellules « occupé » seulement. Au lieu de boucler toutes les cellules (60x40 = 2400), il suffirait de marquer les cellules occupées.

Addition: Maintenant que je pense plus, la solution javascript peut être trop lent/dérangerais il vaut la peine. Vous pourriez faire quelque chose comme ce qui suit, en gardant à l'esprit que c'est plus pseudocode puis une réponse exacte et non testée.

<?php 
$results = fromDB; 
//ex) ['i' => 3, 'j' => 28, 'color' => 'red'] 
?> 
<script> 
    $(document).ready(function() { 
    <?php 
    foreach ($results as $r) { 
     $i = $r['i']; 
     $j = $r['j']; 
     $color = $r['color']; 

     echo "$('#gridTable tr:eq($j) td:eq($i)').setClass('occupied')"; 
     // OR 
     //echo "$('#gridTable tr:eq($j) td:eq($i)').css('background','$color')"; 

    } 
    ?> 

    }); 

</script> 

En résumé, le code HTML sera statique. <table id="gridTable">, <td></td>. PHP sera utilisé pour obtenir des données de la base de données. Le tableau PHP des paires de lignes-colonnes (i, j) sera bouclé et renvoyé en écho dans les instructions javascript (jquery).

Cela peut être excessif pour vos besoins, mais devrait se prêter à une extension supplémentaire.