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

我想建立一个网页，其中载有网格纸的图像。可以选择这些网格，并根据用户选择的链接类型填充和保存颜色。填充完所有块后，将对其进行归档，然后显示新的工作表。我想在后端使用PHP/MySQL，但想知道什么是好的客户端

为什么要为网格添加图像？更好的解决方案是使用一个表或一个充满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>

#网格{
列表样式：无；
}
#格力{
高度：50px；
}
#网格。单元格{
浮动：左；
宽度：100px；
高度：50px；
边框：1px纯黑；
}

最后，当用户单击链接时，使用jQuery填充单元格。您可以通过计算行和单元格或只给单元格一个id来找到单元格。保存部分可以通过AJAX调用将信息保存到DB的页面来完成

简单的jQuery示例（剩下的部分您必须自己考虑）：

$（'link'）。单击（函数（）{
//在这里检查新工作表
var id=$（this.attr（'id'）；
//设置背景颜色
$（'cell_id'）.css（'background-color'，'red'）；//或颜色代码#FF0000
//保存信息
$.post（'save_info.php'，{cell_id:id，颜色：“red”}，函数（数据）{
警报（“已保存！”）；
});
});

您可以在以下位置找到更多信息并下载jQuery：

---

当所有单元格都被填满时，创建新工作表的jQuery代码只需在click函数中进行一点检查即可完成。此检查必须统计所有具有bg颜色的单元格，这与总单元格数相同吗？然后通过删除所有单元格及其背景颜色并设置新id来创建新的工作表。但是你可以自己解决；）

这绝对是一种方法，至少从创建网格和填充颜色的角度来看，这可能是最好的方法。在后端，我想我可以在会话期间使用PHP锁定该块，如果保存/购买该块，则该块将被持久保存在DB中。一旦购买了所有的块，我就会创建一个新页面，将这个页面保存到归档部分，并为新页面创建一个新的DB。

<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>