CSS dynamic table based on Collection


Hello Everyone,

I’m not realy a prorgrammer en new to Meteor. I found a samplecode on https://github.com/reinzor/meteor-bingo and made some changes. It’s a bingo application that has a fill backend and a beamer frontend. If i fillout a number it adds to the Collection and it prints the last number on the beamer site. So far so good.

Now i want to make a table with 5 columns and 10 rows with the numer 1-50 in it. vertical alligned. If the number exists in the Collection or added to the collection I want to change the collor of the cell of that number. How can that be done and what is the best way to do it.

Collections = {}
Collections.Numbers = new Mongo.Collection("numbers");

   'submit .new-number': function (event) {
      // Prevent default browser form submit
      // Get value from form element
      var number = parseInt(event.target.text.value);
      // Insert a task into the collection
        number: number,
        timestamp: (new Date).getTime() // current time
      // Clear form
      event.target.text.value = "";

if (Meteor.isClient) {

    numbers: function () {
      return Collections.Numbers.find({}, {sort: {timestamp: -1}}).fetch();

{{#each numbers}}<li>{{number}}</li>{{/each}}
    <div id="balls">
	<table class="tg">
    <th class="tg-yw4l">B</th>
    <th class="tg-yw4l">I</th>
    <th class="tg-yw4l">N</th>
    <th class="tg-yw4l">G</th>
    <th class="tg-yw4l">O</th>
    <td class="tg-yw4l">1</td>
    <td class="tg-yw4l">4</td>
    <td class="tg-yw4l">7</td>
    <td class="tg-yw4l">10</td>
    <td class="tg-yw4l">13</td>
    <td class="tg-yw4l">2</td>
    <td class="tg-yw4l">5</td>
    <td class="tg-yw4l">8</td>
    <td class="tg-yw4l">11</td>
    <td class="tg-yw4l">13</td>
    <td class="tg-yw4l">3</td>
    <td class="tg-yw4l">6</td>
    <td class="tg-yw4l">9</td>
    <td class="tg-yw4l">12</td>
    <td class="tg-yw4l">14</td>

Kind regards,