-1

I want to dynamically construct a table row like this:

        var row = $("<tr>");
        row.html(
            $("<td>").html("cell 1") +
            $("<td>").html("cell 2") 

        );
        return row;

it doesn't work with multiple $("<td>")'s. It yields a table row with html of Object object.

However, it works with only one td. So I think this is possible, but I don't know how.

Any idea how to make this ?

I also tried append and add.

Thanks for any help !

Edit:

I was doing it before like this :

return "<tr><td>cell1</td><td>cell2</td></tr>" /* etc.. */ ;

but this becomes a horrible / unreadable / uneditable code with attributes and such.

1
  • And somebody downvoted all the answers and the question. I +1'd all the help. Thanks for all the answers.
    – jeff
    Feb 14, 2014 at 2:02

4 Answers 4

0

There are multiple ways...

1. children.appendTo(parent);

2. parent.append(children);

3. parent.html(children);

In your case something like that should work:

var row = $('<tr>');

$("<td>Hello world</td>").appendTo(row);

No need for return :-)

0

just do it like this

$("<tr><td>hi</td><td>hi</td><td></td><td></td><td></td><td></td><td></td><td></td><td>lol</td></tr>").appendTo($("something"));
4
  • Thanks, but I especially stated that this is bad code for me, since I need to edit it often.
    – jeff
    Feb 14, 2014 at 1:18
  • What? You can do anything like this. For example var output = "<tr>"; output += "" + "<td>Cell 1</td>"+ "<td>" + "something " + "</td>"; output += "" + "</tr>"; $(output).appendTo($(something)); Feb 14, 2014 at 1:43
  • Yes, it is possible, but the code becomes unreadable. It takes minutes to change a single variable's name per se.
    – jeff
    Feb 14, 2014 at 2:01
  • that's completely inaccurate you obviously don't have a clue what you're doing Feb 14, 2014 at 2:12
0

here is a functional way of going about doing this:

//data is an array of text/data/whatever
function createRow(data) {
    var row = $("<tr>");
    var td;

    for (var i = 0; i < data.length; i++) {
        td = $("<td>").html(data[i]);
        row.append(td);
    }
    return row;
}

then just append the returned row to whatever html element you want

see this JSFiddle

3
  • Thanks, but in my case, the HTML will not be cell 1 , cell 2. I need to write the content manually.
    – jeff
    Feb 14, 2014 at 1:17
  • just pass all the content you want (for example data=["my first content", "something else"]) to the function. it will spit out a row for you. if you need to change the number of table data elements created or the content, you just change the data array you pass in to something else.
    – moesef
    Feb 14, 2014 at 1:25
  • Oh, yes. Sorry I didn't read your answer carefully. Thanks again !
    – jeff
    Feb 14, 2014 at 1:28
-2

Since you are having jQuery objects use .append()

var row = $("<tr>");
row.append($("<td>").html("cell 1")).append($("<td>").html("cell 2"));
return row;

A slightly different version is

var row = $("<tr>");
row.append($("<td>", {
    html: "cell 1"
})).append($("<td>", {
    html: "cell 2"
}));
return row;
4
  • Nice and fast. Thanks ! I prefer multiple append lines though. I will accept your answer in 10 minutes.
    – jeff
    Feb 14, 2014 at 0:56
  • @redaxmedia where are the additional html calls Feb 14, 2014 at 4:03
  • $("<td>").html("cell 1") equals $("<td>cell 1</td>") ... better performance while using less method calls.
    – Henry Ruhs
    Feb 14, 2014 at 14:55
  • @redaxmedia thanks, but my concern in this case was code readability, not performance.
    – jeff
    Feb 15, 2014 at 16:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.