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

0

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

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;

}

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

Теги:
grid

1 ответ

1
Лучший ответ

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

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).

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

  • 0
    Звучит интересно, но я не совсем уверен, как это сделать. Я имею в виду, как я должен генерировать таблицу, она должна быть статической в HTML? Пожалуйста, объясните более подробно.
  • 0
    Хорошо я понял. Мне действительно нужно получить не только координаты из базы данных, но и поле цвета И использовать его, когда я устанавливаю класс. Как я могу этого достичь? Поскольку сейчас я могу установить только общий «занятый» класс, я хочу использовать цвет, выбранный пользователем, и установить для него ячейку. Действительно благодарен!
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню