Jquery append to table TR

Question

I am using the following jQuery code to append to my table:

        $("tbody#order_details").append('<tr>...</tr><tr>...</tr>');
        $("tbody#order_details").append('<tr>...</tr><tr>...</tr>');

However, when it executes it places the <tr>...</tr><tr>...</tr> on the top of the page instead of below where the current <tbody id="order_details"> starts.

The table code is this:

      <table border="1" cellspacing="0" cellpadding="0" id="OrdersTable" 
            style="border: 1px solid black; margin-top: 0px;">
        <tbody>
        <tr>
            <th>Account Number</th>
            <td colspan="3">99996</td>
            <th>Email</th>
            <td colspan="5"><asp:Label ID="billing_email" runat="server" Text="Label"></asp:Label></td>
            </tr>
        <tr>
        etc etc....
        </tbody>
             <tbody id="order_details"> 
                <!-- Start looping the orders here -->

             </tbody>
        </table>

What am I forgetting to put in order for it to add those two lines AFTER the <tbody id="order_details">?

why do you have an opening tbody tag with a closing thead tag — wirey00
– wirey00, Commented Aug 14, 2012 at 14:49
I know its not an answer to your question, but after quite some time generating rows to tables in Jquery I found Knockout.js makes these sort of problems 1000x easier. Check out this tutorial, maybe it'll help (keeping in mind this is the second tutorial in a series) — Nick
– Nick, Commented Aug 14, 2012 at 14:50
Have you looked at the error console? Is there anything there? — David Thomas
– David Thomas, Commented Aug 14, 2012 at 14:50
@mplungjan: I'm pretty sure the ... is meant to imply "stuff here that I'm not including for brevity" rather than a literal .... The problem does seem to be the two tbody tags, the first of which should be thead. Most browsers will self-correct the invalid markup, so the OP effectively has two tbody tags, and so the rows will be appended to each one. — Chris Pratt
– Chris Pratt, Commented Aug 14, 2012 at 14:52

Ankur Ghelani · Accepted Answer · 2012-08-14 14:57:51Z

1

just change this html to this:

      <table border="1" cellspacing="0" cellpadding="0" id="OrdersTable" style="border: 1px solid black; margin-top: 0px;">
        <thead>
        <tr>
            <th>Account Number</th>
            <th colspan="3">99996</th>
            <th>Email</th>
            <th colspan="5"><asp:Label ID="billing_email" runat="server" Text="Label"></asp:Label></th>
        </tr>
        etc etc....
        </thead>
        <tbody id="order_details"> 
          <!-- Start looping the orders here -->

        </tbody>
        </table>

I think it was because of HTML markups, I hope this would help.

edited Aug 14, 2012 at 14:57

answered Aug 14, 2012 at 14:52

Ankur Ghelani

6594 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ohgodwhy Over a year ago

<td>'s still within the <thead>. He also can't append just a <tr> with no <td> to his <tbody>.

jasonlfunk Over a year ago

There is also an unclosed <tr> tag in the head, colspan attributes on the th elements and what looks like data in the head. I think there are larger problems than just a little markup mistake.

Diego ZoracKy · Accepted Answer · 2012-08-14 14:53:09Z

1

You have to write "... " inside a TD. Should be ... .

And for better performance use just #order_details rather than tbody#order_details. As ID is unique jQuery will always find the right element without the need of specifying the tag name

answered Aug 14, 2012 at 14:53

Diego ZoracKy

2,29515 silver badges15 bronze badges

Comments

jasonlfunk · Accepted Answer · 2012-08-14 14:55:07Z

1

Your markup is not valid and therefore jQuery isn't able to make sense out of what to do.

I have created a jsFiddle with what I think you want: http://jsfiddle.net/DSLBT/

answered Aug 14, 2012 at 14:55

jasonlfunk

5,2695 gold badges32 silver badges39 bronze badges

Comments

Amyth · Accepted Answer · 2012-08-14 14:55:41Z

1

Try this ::

$("tbody#order_details").append('<tr><td>...</td></tr><tr><td>...</td></tr>');

answered Aug 14, 2012 at 14:55

Amyth

33k28 gold badges97 silver badges137 bronze badges

1 Comment

StealthRT Over a year ago

That causes it to be at the bottom of the table.

Collectives™ on Stack Overflow

Jquery append to table TR

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

1 Comment

Related