Generate a dynamic grid and populate selected cells. Please help!

Question

Hello,

I want to generate a grid where people can selected one or more cells and then save them into the database in this format (row,cell):

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

Then I want to generate the grid and at the same time mark the cells that is occupied. I have managed to do this (see below) but it does not feel right and I must get the color field from the database aswell so that the cell get the right look (different for each user).

This is how I generate the grid and populate it.

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;

}

How can I both generate the grid, populate the cells that are occupied and color them individually. I am really stuck here.

Please help!

Answer 1

You could set the table class or id to have the "pixel" properties by default. Then you would only need to specify the "occupied" classes.

ex) <table id="gridTable">..<td> instead of <table>..<td class="pixel">

If you can use jquery (javascript), then you could use it together with CSS selectors to change the classes of your "occupied" cells only. Instead of looping through all (60x40 = 2400) cells, you would then only have to mark the occupied cells.

Addition: Now that I think about it more, the javascript solution might be too slow/trouble then it is worth. You could do something like the following, keeping in mind that it is more pseudocode then an exact answer and untested.

<?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>

In summary, the HTML will be static. <table id="gridTable">, <td></td>. PHP will be used to get data from the database. The PHP array of (i, j) row-column pairs will be looped through and echoed out into javascript (jquery) statements.

This might be overkill for your needs, but should lend itself to some added extendability.