Dynamically add row to a table using PHP and Mootools

This short cross browser example will show you how to dynamically add rows to a table using PHP and Mootools.

The Files

• table_form.html  ::  This is our main HTML file.  It contains a HTML Table and a simple Form.
• table_form.php :: This is the php file which will process the form and return results back to our HTML page
• table_form.js :: This is the Javascript file which will handle submitting data to php and handle the response
• table_form.css :: basic css file to add styling

View a Demo

Download the full Source

I’ve tried to add detailed comments to the source code but if you have any questions just post them in the comments.

The Bare Bones : Row Injection

For those who are only interested in the table row injection here is a function which will get the job done and is crossbrowser. If you find otherwise let me know. The key here is instead of creating individual elements for tr and td and injecting them into the table, you create a full table element with a single row and inject that into your table.

var inject_row = function( table, data )
{
    var str = '';
    data.each(function(item, index){
        str += '<td>'+item+'</td>';
    });
    var tr = new Element('div', {
        html: '<table><tbody><tr>' + str + '</tr></tbody></table>'
    }).getElement('tr');
    tr.inject( table );
}