(the points object can not be changed)
How to create?: table with 30 rows and 30 cols; all cells have blue background; all cells that exist in points object with coordinates (x=cols, y=rows) to have red background.
For example: cell on row 15 and col 12 must be with red background. cell on row 18 and col 12 must be with red background. cell on row 21 and col 12 must be with red background. and so on.
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" }
]
}