生成动态网格，并填充选定单元格

我要生成一个网格，人们可以选择一个或多个单元格，然后将它们保存到这种格式的数据库（行，单元格）：生成动态网格，并填充选定单元格

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

生成动态网格，并填充选定单元格

回答

相关问题