Question

我正在设置一个包含网格纸图像的页面。可以选择这些网格，并根据用户选择的链接类型填充和保存颜色。一旦所有块都被填满，这将被存档，然后将显示一个新的工作表。我想在后端使用PHP / MySQL但是想知道什么是好的客户端？

Answer 1

为什么网格图像？更好的解决方案是使用填充div的表或列表来创建网格。然后在用户单击链接时使用jQuery填充背景。

网格示例：

<ul id="grid">
    <li>
        <div class="cell" id="cell_id"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </li>
    <li>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
        <div class="cell"></div>
    </li>
    ...
</ul>

CSS示例：

<style>
    #grid {
        list-style: none;
    }

    #grid li {
        height: 50px;
    }

    #grid .cell {
        float: left;
        width: 100px;
        height: 50px;
        border: 1px solid black;
    }
</style>

最后，当用户点击链接时，使用jQuery填充单元格。您可以通过计算行和单元格来查找单元格，或者只为单元格指定一个id。保存部分可以通过对页面的AJAX调用来完成，该页面将信息保存到数据库。

简单的jQuery示例（你必须自己想一想）：

<script>
    $('link').click(function() {
        //place check for new sheet here 

        var id = $(this).attr('id');

        //set the bg color
        $('cell_id').css('background-color', 'red'); //or color code #FF0000

        //save the info
        $.post('save_info.php', { cell_id: id, color: "red" }, function(data) {
             alert('saved!');
        });
    });
</script>

您可以在http://jquery.com/

找到更多信息并下载jQuery

在填充所有单元格时创建新工作表的jQuery代码可以通过点击功能进行一些检查来完成。此检查必须计算所有具有bg颜色的单元格，这与总单元格相同吗？然后通过删除bg颜色的所有单元格并设置新的ID来创建新工作表。但你可以自己解决这个问题;）。

PHP：用颜色填充图像块并保存信息

1 个答案: