生成動態網格，並填充選定單元格

我要生成一個網格，人們可以選擇一個或多個單元格，然後將它們保存到這種格式的數據庫（行，單元格）：生成動態網格，並填充選定單元格

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; 

}

我都如何生成網格，填充被佔領的細胞，並分別將它們上色。我真的被困在這裏。

來源

2010-09-17 Jonathan Clark

默認情況下，您可以將表類或ID設置爲具有「像素」屬性。那麼你只需要指定「佔用」類。

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將用於從數據庫中獲取數據。（i，j）行列對的PHP數組將循環並回顯到javascript（jquery）語句中。

這可能是爲了你的需要矯枉過正，但應該增加一些附加的可擴展性。

來源

2010-09-17 21:33:08

聽起來很有趣，但我不確定如何做到這一點。我的意思是我該如何生成表格，它應該在HTML中是靜態的？請詳細解釋。 – 2010-09-17 22:23:57

好的，我明白了。我真的不僅需要從數據庫中獲取座標，還需要獲取顏色字段，並在設置類時使用它。我怎樣才能實現它？因爲現在我只能設置一個通用的「佔用」類，我想使用用戶選擇的顏色並將單元格設置爲該單元格。非常感謝！ – 2010-09-17 23:04:47

如果您只關心顏色，您可以使用'.css（'background-color'，'$ color'）;'而不是'.setClass'，您可以在其中獲得'$ color'你的數據庫，或其他手段 – 2010-09-17 23:12:28

生成動態網格，並填充選定單元格

回答

相關問題