Я хочу создать сетку, в которой люди могут выбрать одну или несколько ячеек, а затем сохранить их в базу данных в этом формате (строка, ячейка):
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;
}
Как я могу сгенерировать сетку, заполнить ячейки, которые заняты, и покрасить их по отдельности. Я действительно застрял здесь.
Вы можете установить для класса или идентификатора таблицы свойства по умолчанию "пиксель". Тогда вам нужно будет только указать "занятые" классы.
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).
Это может быть излишним для ваших нужд, но должно поддаваться некоторой дополнительной расширяемости.