CODEWITHSUNDEEP
javascriptjquery
schlomm
schlomm

Reputation: 571

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://jsfiddle.net/nwd6na53/2/
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!

Upvotes: 0

Views: 257

Answers (2)

Marc
Marc

Reputation: 11613

Within your for loop, you need something more like this:

for (var i = 0; i <= 10; i++) {
    var row = $('<tr></tr>');
    $(row).append('<td>row ' + i + ', column1</td>');
    $(row).append('<td>row ' + i + ', column2</td>');
    $(row).append('<td>row ' + i + ', column3</td>');
    $('#mytable').find('tbody').append(row);
}

Here's a fiddle with a code example: https://jsfiddle.net/u2enny6o/3/

Note that I include complete tags in the append().

Better yet would be to use the insertRow() and insertCell() approach you use for the header section.

Upvotes: 1

Qianyue
Qianyue

Reputation: 1777

The answer of @Marc doesn't run well. See this jsfiddle fail.

I think you should create a variable for an element tr. And append this tr to the tbody. For example, see this jsfiddle success :

var row = '<tr>' + '<td>' + indicatorValue + '</td><td>' + regionValue + '</td>' + '<td>' + bestValues + '</td></tr>';
$('table').find('tbody').append(row);

Upvotes: 0

Related Questions