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

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 — nokiko
– nokiko, Commented Oct 18, 2010 at 7:27

Hannes · Accepted Answer · 2010-10-18 07:35:28Z

2

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>

answered Oct 18, 2010 at 7:35

Hannes

8,2575 gold badges35 silver badges51 bronze badges

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

Collectives™ on Stack Overflow

add and remove row from table using button

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related