add and remove row from table using button

Question

I would like to have a table with 10 rows 5 of which are visible. Also 2 buttons - and + and if clicked a row is added or removed, same as the + image in the bbc.co.uk site. How would i accomplish this

Answer 1

Just add Listeners and use remove & append:

<table id="table">
    <tr>
        <td>foo</td>
    </tr>
    <tr>
        <td>bar</td>
    </tr>
</table>
<span id="plus">+</span>
<span id="minus">-</span>

<script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
<script>
$(document).ready(function () {
    $('#minus').click(function(){
        $('#table tr:last-child').remove();
    });
    $('#plus').click(function(){
        $('#table').append('<tr><td>new</td></tr>');
    });
});
</script>

Answer 2

I made you a quick demo here. You didn't say you wanted to keep the old ones as they do on the BBC site so I kept that feature out JSFiddle