Adding rows to a table.

[Russell Keith]

I have the table:

<table id="paymentHistory">

        <tbody>

            <tr><th>Suffix</th><th>Coll<br />Code</th><th>Payment History</th></tr>

        </tbody>

    </table>

 

I am trying to add a row to it:

$('paymentHistory').down('tr').insert('<tr><td>50</td><td>Coll<br />Code</td><td>Payment History</td><td>&gt;30</td></tr>');

 

I can’t figure out where I am going wrong.

[Walter Lee Davis]

This looks as though you are trying to insert the tr into another tr,
which just won't work. Try inserting into the tbody, or select a tr
and insert before or after, using this syntax:

$('paymentHistory').down('tr').insert({before:'your tr code here'});

Walter

[Guille]

As Walter sais, you're going to insert a tr inside the tr. Besides,
imho, the "prototype way" should be:

tr = new Element('tr');
tr.insert(new Element('td').update(50));
tr.insert(new Element('td').update('Coll'));
tr.insert(new Element('td').update('Code'));
tr.insert(new Element('td').update('Payment History'));
tr.insert(new Element('td').update('&gt;30'));
$('paymentHistory').down('tbody').insert(tr);

Also i would suggest you to sepparate the header of the table from the
body using the <thead> tag. This way, you could flush the tbody (data)
if needed without having to care about the first row that actually
contains the <th> with the column heads.

[T.J. Crowder]

Hi,

> As Walter sais, you're going to insert a tr inside the tr. Besides,
> imho, the "prototype way" should be:

That works, but if you're building any significant number of rows with
it, you'll soon run into performance problems related to the DOM
methods used under the covers. Somewhat surprisingly, building up a
string and then inserting that (which ultimately ends up setting
`innerHTML`) is much, much faster than building up Element objects
using the DOM API. This isn't because of Prototype, but because of
going through the DOM API layer -- details here[1].

[1] http://groups.google.com/group/prototype-scriptaculous/msg/ff8665e1f245c65e

HTH,
--
T.J. Crowder
Independent Software Consultant
tj / crowder software / com
www.crowdersoftware.com