How to wrap all td into one tr to my JQuery code?

Question

var url = 'json/result.json';
$(document).ready(function() {
    $.getJSON(url, function(data) {
        $.each(data.video, function(index, video) {
            var row = $("<tr></tr>");                   
            $('#userDataGrid').append('<td>' + video.id + '</td>');
            $('#userDataGrid').append('<td>' + video.name + '</td>');
            $('#userDataGrid').append('<td>' + video.url + '</td>');
            $.each(video.author.data, function(index, author) {
                $('#userDataGrid').append('<td> Author: ' + author.name_author + '</td>');
            });
            $('#userDataGrid').append('<br/>');
        });
    });
    $("#userDataGrid p").addClass("selected highlight");
    console.log("========================");
    //console.log(data);
    console.log("========================");
});

score 1 · Answer 1 · answered Sep 01 '12 at 18:12

var row = $("<tr></tr>");                   
row.append('<td>Foo</td>');
row.append('<td>Bar</td>');
..
$('#userDataGrid').append(row);

But this is how to use append correctly:

var row = '<tr>';
row += '<td>Foo</td>';
row += '<td>Bar</td>';
..
row += '</tr>';
$('#userDataGrid').append(row);

Source:

http://www.learningjquery.com/2009/03/43439-reasons-to-use-append-correctly

score 1 · Answer 2 · answered Sep 01 '12 at 18:15

 $.getJSON(url, function(data) {
    $.each(data.video, function(index, video) {
      var row_str= '<tr>';                   
      row_str += '<td>' + video.id + '</td>';
      row_str += '<td>' + video.name + '</td>';
      row_str += '<td>' + video.url + '</td>';

          $.each(video.author.data, function(index, author) {
              row_str += '<td> Author: ' + author.name_author + '</td>';
          });
      row_str += '<br/>';
      row_str += '</tr>';
      $('#userDataGrid').append(row_str);
    });
});

Btw, just take a look at this - http://stackoverflow.com/questions/171027/add-table-row-in-jquery. There are a few methods suggested there — ddb, Sep 01 '12 at 18:19

score 0 · Answer 3 · answered Sep 01 '12 at 18:14

0

You can use wrapAll method.

$.each(data.video, function(index, video) {
    // ...
    $('#userDataGrid > td').wrapAll('<tr></tr>')
});

answered Sep 01 '12 at 18:14

Ram

143,282
16
168
197

I like this wrapAll but its wrapping only one record in .each, any thoughts? – Shoaib Ud-Din Sep 01 '12 at 18:31
@ShoaibUd-Din Call it at the end of `each` loop. – Ram Sep 01 '12 at 18:38
3 td in one tr then 3 td in one tr – Shoaib Ud-Din Sep 01 '12 at 18:43

How to wrap all td into one tr to my JQuery code?

3 Answers3