How do I populate a table?

Question

I have a empty table that I would like to populate based on data entered on the same page.

Example. User enter Name, DOB. Click Add. Table with Name and DOB column has +1 row. And additions can be made as many times as the user choose.

<table width= "100%">
        <tr>
            <th colspan="3">Owners Already Added</th>
        </tr>
        <tr>
            <td>(NAME)</td>
            <td>(DOB)</td>
        </tr>
</table>


<table id="Owner">
        <tr>
            <th colspan="2">Owner</th>
        </tr>
        <tr>
            <td>Name</td>
            <td><input id="txtName" type="text" /></td>
        </tr>
        <tr>
            <td>Address</td>
            <td><input id="txtDOB" type="text" /></td>
        </tr>
</table>

Answer 1

In the first table, add an id of 'DisplayTable' and change your columns to have class="name" and class="dob" respectively.

The jquery to do this is as follows:

var $tr = $('#DisplayTable tr:last');
$tr.find('.name').text($('#txtName').val());
$tr.find('.dob').text($('#txtDOB').val());

Answer 2

JQuery might be your friend here. See this question as it resembles what you are trying to do.

You might also need to do a post to the server to persist your data. See jQuery post for help

Answer 3

Just to complete Keith Rousseau's answer (added code to add new row):

<table id="displayTable">
    <tr>
        <td>Name</td>
        <td>Date of birth</td>
    </tr>
</table>
<table id="Owner">
    <tr>
        <th colspan="2">
            Owner
        </th>
    </tr>
    <tr>
        <td>
            Name
        </td>
        <td>
            <input id="txtName" type="text" />
        </td>
    </tr>
    <tr>
        <td>
            Date of birth
        </td>
        <td>
            <input id="txtDOB" type="text" />
        </td>
    </tr>
</table>
<button onclick="addNewRow();">Add</button>

<script type="text/javascript">
    function addNewRow() {
        $('#displayTable tr:last').after('<tr><td class="name"></td><td class="dob"></td></tr>');
        var $tr = $('#displayTable tr:last');
        $tr.find('.name').text($('#txtName').val());
        $tr.find('.dob').text($('#txtDOB').val());
    }
</script>

Answer 4

Well, since it is jQuery, and a table of sorts, you might look into a plug-in such as jqGrid which we have used with sucess.

See the link here: jqGrid

They have examples doing what you describe either in-line in the table, or in a modal dialog, lots of options here.