2010-09-17 88 views
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; 

} 

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

回答

1

默認情況下,您可以將表類或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)語句中。

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

+0

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

+0

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

+0

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