How to append tds into tableRows?

I'm trying to append different <td>-elements to corresponding tr-elements, but no matter, what I am trying: it does not work :-/ Unfortunately I'm not able to show you an complete jsfiddle, because the whole table stuff is rather complex and depends on a map and stuff like that, but I hope some code snippets are also okay.

Table-Structure (header)

var table = createElement('table');
table.className = "table";
table.id = "table";
var header = table.createTHead();
var row = header.insertRow(0);
var cell0 = row.insertCell(0);
cell0.innerHTML = "Indicator"
var cell1 = row.insertCell(1);
cell1.innerHTML = "Current value"
var cell2 = row.insertCell(2);
cell2.innerHTML = "High value"
var cell3 = row.insertCell(3);
cell3.innerHTML = "Low value"
var cell4 = row.insertCell(4);
cell4.innerHTML = "Average";
var cell5 = row.insertCell(5);
cell5.innerHTML = "Pic";
tbody = table.appendChild(document.createElement('tbody'));

Then I'm using a for-loop, where the rest of the table is created:

//"key" is the description of the "value"
for (var key in values) {
    //...
    //method to calculate the values
    ...
    //append values to tbody
    $(table).find(tbody).append("<tr>");
    $(table).find(tbody).append( "<td>"+(indicatorValue));
    $(table).find(tbody).append( "<td>"+(regionValue));
    $(table).find(tbody).append( "<td>"+(bestValues));
    $(table).find(tbody).append( "<td>"+(worstValues));
    $(table).find(tbody).append( "<td>"+(average));
    //append image to a td-element
    var img = "<img src='img/green_circle.png' />";
    if (picIdentifier != 'green')  {
        img = "<img src='img/red_circle.png' />";
    }
    $(table).find(tbody).append( "<td>"+ img +"</td>");
}

Using the above code, the table looks like the following jsfiddle: http://ift.tt/17omC4W

As you can see, the td-elements in the tbody are not wrapped in the tr-element, but the table-rows are empty. Do you have any tip how to put the tds into the tr-elements? Any help is much appreciated!