循环对象数据在JQuery中创建tr和td元素？

Question

In the past I used Vanilla JS to loop over Ajax return data and build the table. For this project I would like to use JQuery. Reason why, some of my td elements need to have special attributes. In my opinion adding these attributes would be easier with JQuery. Here is example of what I have:

    $.ajax({
        type: 'POST',
        url: 'Application.cfc?method=findRec',
        data: {'recNum':recNum},
        dataType: 'json'
    }).done(function(obj){ 
        var tbl = "<table id='myTbl'><thead><tr><th>Last</th><th>First</th></thead><tbody>";

        $.each(obj.DATA, function(i, item) {  
 $('#myTbl').append($('<tr>').attr('id',$.trim(decodeURIComponent(item.REC_ID))).append(
              $('<td>').text($.trim(decodeURIComponent(item.LASTNAME))),
              $('<td>').text($.trim(decodeURIComponent(item.FIRSTNAME)))                    
            )
        });
        tbl += "</tbody></table>";
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert("Error: "+errorThrown);               
    });

For some reason code above didn't produce any table rows. I'm wondering what is breaking down my code. If anyone can help please let me know. Each of my table rows should have assigned unique ID that is returned with Ajax call data. I'm not sure if append is causing some problems. If anyone see the problem please let me know.

Answer 1

There is no closing tags for your tr and td tags:

    var tbl = "<table id='myTbl'><thead><tr><th>Last</th><th>First</th></tr></thead><tbody>";

        $.each(obj.DATA, function(i, item) {  
 $('#myTbl').append($('<tr>').attr('id',$.trim(decodeURIComponent(item.REC_ID))).append(
              $('<td>').text($.trim(decodeURIComponent(item.LASTNAME))),
              $('<td>').text($.trim(decodeURIComponent(item.FIRSTNAME)))                    
            )
        });
        tbl += "</tbody></table>";
    }).fail(function(jqXHR, textStatus, errorThrown){
        alert("Error: "+errorThrown);               
    });

Close then when you append them as well.

Furthermore, the table element is not created and therefore does not exist yet .