javascript - jQueryで座標に基づいて色付きのセルを持つテーブルを作成する方法は?

Question

(ポイントオブジェクトは変更できません)

作成方法: 30 行 30 列のテーブル。すべてのセルの背景は青色です。座標 (x=列、y=行) を持つポイント オブジェクトに存在するすべてのセルの背景が赤になります。

例: 行 15 と列 12 のセルは、背景が赤である必要があります。行 18 と列 12 のセルは、背景が赤である必要があります。行 21 と列 12 のセルの背景は赤でなければなりません。等々。

var Points = {
    "points" : [
        { "id": "F2", "x": "12", "y": "15" },
        { "id": "F3", "x": "12", "y": "18" },
        { "id": "F4", "x": "12", "y": "21" },
        { "id": "F5", "x": "12", "y": "25" },
        { "id": "F6", "x": "12", "y": "27" },
        { "id": "F7", "x": "12", "y": "29" },
        { "id": "C1", "x": "30", "y": "12" },
        { "id": "C2", "x": "30", "y": "15" },
        { "id": "C3", "x": "30", "y": "18" },
        { "id": "C4", "x": "30", "y": "25" },
        { "id": "C5", "x": "30", "y": "27" },
        { "id": "C6", "x": "30", "y": "29" }
    ]
}