Создать динамическую сетку и заполнить выбранные ячейки

Question

Я хочу создать сетку, в которой люди могут выбрать одну или несколько ячеек, а затем сохранить их в базе данных в следующем формате (строка, ячейка):

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

Затем я хочу создать сетку и в то же время отметить ячейки, которые были выбраны. Мне удалось сделать это (см. Ниже), но это не правильно. Также мне нужно получить цвет для поля из базы данных, чтобы ячейка выглядела по-разному для каждого пользователя.

Вот как я генерирую сетку и заполняю ее:

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;

}

Как я могу создать сетку, заполнить ячейки, которые заняты, и покрасить их по отдельности. Я действительно застрял здесь.

Answer 1

Вы можете установить класс таблицы или идентификатор, чтобы иметь свойства "pixel" по умолчанию. Тогда вам нужно будет только указать «занятые» классы.

ex) <table id="gridTable">..<td> вместо <table>..<td class="pixel">

Если вы можете использовать jquery (javascript), то вы можете использовать его вместе с селекторами CSS для изменения классов только ваших «занятых» ячеек. Вместо того, чтобы проходить все ячейки (60x40 = 2400), вам нужно будет только отметить занятые ячейки.

Дополнение: Теперь, когда я думаю об этом больше, решение javascript может быть слишком медленным / неприятным, чем оно стоит. Вы можете сделать что-то вроде следующего, имея в виду, что это более псевдокод, чем точный ответ и непроверенный.

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

В итоге, HTML будет статичным. <table id="gridTable">, <td></td>. PHP будет использоваться для получения данных из базы данных. Массив PHP из (i, j) пар строк-столбцов будет проходить по циклу и выводиться в операторы javascript (jquery).

Это может быть излишним для ваших нужд, но должно быть дополнено некоторыми возможностями расширения.