jQuery can I use append/appendTo in this javascript function

Question

I have created a function that successfully appends a table with rows/cells and populates them from an array. The problem is that they are being appended to the top of the table.

It is doing this because the line var row = tbody.insertRow(r);...I think/hope.

The function to look at in the link below is appendTable(id)

Here is the working example that appends to the top: http://jsfiddle.net/JEAkX/4/

I was thinking something like this would work: var row = insertRow(r).appendTo('tbody>tr:last'); however it just broke the function.

I also tried MANY different combinations of .append() and .appendTo() on that same line with no success. As a last ditch effort I tried variations on the linecell.innerHTML = "<input type='text' size='1' value='" + subset[i++] + "' />" but I believe by that time the location is already decided.

Here is the function extracted from the example:

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var i = 0;
    for (var r = 0; r < 2; r++) {
        var row = tbody.insertRow(r);
        for (var c = 0; c < 4; c++) {
            var cell = row.insertCell(c);
            cell.innerHTML = "<input type='text' size='1' value='" + subset[i++] + "' />"
        }
    }
}

On a side not I tried (unsuccessfully) insertAfter at one point but read that I would not be able to use it on something that didn't exist on page load.

I created a fiddle with a working example: jsfiddle.net/JEAkX/9 — Adam Ayres
– Adam Ayres, Commented Mar 10, 2011 at 1:48

Jeff Sternal · Accepted Answer · 2011-03-10 01:12:26Z

1

insertRow adds a row at the specified index.

When that parameter (r in your code) is zero, it adds the row to the top of the table. To add them to the end instead, use the current length of the table as your starting point:

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var length = tbody.rows.length;
    for (var r = length; r < length + 1; r++) {
        var row = tbody.insertRow(r);
        // etc.
    }
}

answered Mar 10, 2011 at 1:12

Jeff Sternal

48.8k9 gold badges97 silver badges121 bronze badges

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

1 Comment

tehaaron Over a year ago

This made it far easier than I was expecting. Thank you...on to the next step!

afranz409 · Accepted Answer · 2011-03-10 01:23:15Z

0

Creating the string for the row and appending that to the tbody works, and from the docs it looks like the intended use for appendTo().

function appendTable(id)
{
    var tbody = document.getElementById(id).getElementsByTagName("tbody")[0];
    var i = 0;
    for (var r = 0; r < 2; r++) {
        var row = tbody.insertRow(r);
        var rowtext = '<tr>';
        for (var c = 0; c < 4; c++) {
            rowtext += '<td><input type="text" size="1" value="x" /></td>';
        }
        rowtext += '</tr>';
        $(rowtext).appendTo(tbody);
    }
}

answered Mar 10, 2011 at 1:23

afranz409

7726 silver badges11 bronze badges

Collectives™ on Stack Overflow

jQuery can I use append/appendTo in this javascript function

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related