Coder Perfect

Add table row in jQuery

Category: javascript

Tag: , ,

Problem

What is the best jQuery way for adding an extra row to a table as the last row?

Is this acceptable?

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Are there any restrictions on what you may include in a table like this (for example, inputs, selects, or the number of rows)?

Asked by Darryl Hein

Solution #1

The strategy you offer isn’t certain to get you the result you want – for example, suppose you had a tbody:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
</table>

You’d wind up with something like this:

<table id="myTable">
  <tbody>
    <tr>...</tr>
    <tr>...</tr>
  </tbody>
  <tr>...</tr>
</table>

As a result, I would advise taking the following strategy instead:

$('#myTable tr:last').after('<tr>...</tr><tr>...</tr>');

As long as it’s valid HTML, you can add anything in the after() method, including numerous rows like in the example above.

Update: After some recent action with this subject, I’m revisiting this answer. The statement by eyelidlessness that there will always be a tbody in the DOM is correct; however, this is only true if there is at least one row. Unless you specify one yourself, there will be no tbody if you don’t have any rows.

Rather than inserting material after the last tr, DaRKoN_ advises appending to the tbody. This solves the problem of no rows, but it’s not foolproof because you might theoretically have many tbody elements, with the row being added to each of them.

When all is said and done, I’m not sure there is a single one-line answer that covers every possible case. You’ll need to double-check that the jQuery code matches your markup.

Even if your table has no rows, I believe the safest option is to always include at least one tbody in your markup. On this foundation, you can use the following formula, which will operate regardless of how many rows you have (and accommodate for numerous tbody elements):

$('#myTable > tbody:last-child').append('<tr>...</tr><tr>...</tr>');

Answered by Luke Bennett

Solution #2

A built-in feature of jQuery is the ability to alter DOM components on the fly.

You can decorate your table in whatever way you choose, such as this:

$("#tableID").find('tbody')
    .append($('<tr>')
        .append($('<td>')
            .append($('<img>')
                .attr('src', 'img.png')
                .text('Image cell')
            )
        )
    );

In jQuery, the $(‘some-tag>’) object is a tag object with multiple attr properties that can be set and retrieved, as well as text, which represents the text between the tags: text.

This is some unusual indenting, but it makes it simpler to understand what’s going on in this case.

Answered by Neil

Solution #3

So much has changed since @Luke Bennett responded to this question. Here’s the latest information.

Since version 1.4(?) of jQuery, if the element you’re trying to insert (using any of the append(), prepend(), before(), or after() methods) is a tr>, it automatically identifies it and inserts it into the first tbody> in your table, or wraps it in a new tbody> if one doesn’t exist.

So, sure, your example code is acceptable and will work with jQuery 1.4 and higher. 😉

$('#myTable').append('<tr><td>my data</td><td>more data</td></tr>');

Answered by Salman von Abbas

Solution #4

What if there was a tfoot> and a tbody>?

Such as:

<table>
    <tbody>
        <tr><td>Foo</td></tr>
    </tbody>
    <tfoot>
        <tr><td>footer information</td></tr>
    </tfoot>
</table>

Your new row would then be added to the footer rather than the body.

As a result, including a tbody> tag and using.append rather than.after is the ideal method.

$("#myTable > tbody").append("<tr><td>row content</td></tr>");

Answered by ChadT

Solution #5

I’m aware that you requested a jQuery method. I did a lot of research and discovered that the following function is a better approach to achieve it than using JavaScript directly.

tableObject.insertRow(index)

The position of the row to insert is specified by index, which is an integer (starts at 0). A value of -1 can also be provided, which causes the new row to be inserted at the end of the list.

In Firefox and Opera, this parameter is necessary, but in Internet Explorer, Chrome, and Safari, it is optional.

If this option is left blank, insertRow() creates a new row at the bottom of the page in Internet Explorer and the top of the page in Chrome and Safari.

It will operate with any HTML table structure that is allowed.

The following example inserts a row in the last position (index -1 is used):

<html>
    <head>
        <script type="text/javascript">
        function displayResult()
        {
            document.getElementById("myTable").insertRow(-1).innerHTML = '<td>1</td><td>2</td>';
        }
        </script>
    </head>

    <body>       
        <table id="myTable" border="1">
            <tr>
                <td>cell 1</td>
                <td>cell 2</td>
            </tr>
            <tr>
                <td>cell 3</td>
                <td>cell 4</td>
            </tr>
        </table>
        <br />
        <button type="button" onclick="displayResult()">Insert new row</button>            
    </body>
</html>

I hope it becomes useful.

Answered by shashwat

Post is based on https://stackoverflow.com/questions/171027/add-table-row-in-jquery