Append a header to dynamically-loaded tables using JQuery

Question

I've been having a hard time trying to append new headers to tables I build dynamically using data grabbed from an AJAX call.

I've already asked here a question about my problem, but it seems that there's no logical answer to it.

So my problem is that I can't actually get the table I want to append my new info to, what I tired was this:

console.log(id); //This prints the right id!
//THIS is not working...
$('#'+id+' tr:first').append("<td>Well "+(wellCounter)+"</td>");
//...
//$('#'+401+' tr:first').append("<td>Well "+(wellCounter)+"</td>");--this will work
table+="<td>M "+fourthLevel.male+"</td>";
table+="<td>H "+fourthLevel.herm+"</td>";

But it didn't work, so I was wondering if you can help me with another way to get the same functionality without using the id to get the table. Maybe the closest function will work but I don't have experience with that, and I tried it but failed.

Here the full code:

    $.each(data, function(index, firstLevel) {
        $.each(firstLevel, function(index2, secondLevel) {
            var id = firstLevel['id'];
            var author = firstLevel['author'];
            var date = firstLevel['date'];
            var experimental_conditions = firstLevel['experimental_conditions'];
            if(index2 == 'items'){                      
                var table = '<div class=tableWrapper><table id=\"'+id+'\" class=\"experimentTable\">';
                table += '<input id=\"basketButton\" type=\"submit\" value=\"Add to basket\" class=\"basketButton\" experimentBatch=\"'+id+'\"> <div class="superHeader"><span class=\"superHeader\">Date: '+date+', By '+author+'</span><br /><span class=\"subHeader\">Experimental conditions: '+experimental_conditions+'</span>'
                table += '<tr><td></td><td COLSPAN=2>Totals</td></tr>';
                table += '<tr id="header"><td width="20%">Genotype</td><td width="10%"><img src="images/herma.png"></td><td width="10%"><img src="images/male.png"></td>';

                //for each table
                $.each(secondLevel, function(index3, thirdLevel) {
                    var nWells = 0;
                    table += "<tr><td><a href=\"wells.html?mutant="+thirdLevel.mutant_name_c+"&rnai="+thirdLevel.rnai_sequence_id_c+"&date="+thirdLevel.date_c+"&author="+author+"\" id=\"getWindow\">"+thirdLevel['mutant_name_c']+"</td><td>"+thirdLevel['herm_total']+"</td><td>"+thirdLevel['male_total']+"</a></td>";
                    currentRow = 3;
                    wellCounter = 0;
                    //for each row
                    $.each(thirdLevel, function(index4, fourthLevel) {
                        wellCounter++;
                        if (fourthLevel.date_r != undefined){
                            console.log(id);
                            //THIS is not working...
                            $('#'+id+' tr:first').append("<td>Well "+(wellCounter)+"</td>");
                            //...
                            table+="<td>M "+fourthLevel.male+"</td>";
                            table+="<td>H "+fourthLevel.herm+"</td>";
                        }
                    });
                });
                table +='</table></div>'
                $('#searchResults').append(table);
            }
        });
    });

NOTE: Male and herm are worm genders, not options!

Answer 1

I didn't go through your code, but when I'm working with dynamic table in jquery i try with Jquery "OBJECT". something like

var $tbl = $('<table />'), $tr=$('<tr />'), $td=$('<td />');

then you can add attr, append etc, and is much easier to read, and manipulate.

$tbl.attr('id',id).append($tr.append($td);

etc.