JQuery Manipulate HTML Table

From CoderLearner
Jump to: navigation, search

How to manipulate HTML table

  • There are many ways you can manipulate the HTML table, in this tutorial you will learn how to add or remove table rows.
  • Usually, table contains the table title. We are not going to remove the table title.
  • In jQuery table is also had the index. The first TR is having index 0.
  • We also can use :first and :last to access the first TR or last TR of the table.

HTML Table

This is the HTML table we use for this example.

<table border="1" id="mytable">
<tr>
	<td>Name</td><td>Age</td>
</tr>
<tr>
	<td>Bob</td><td>23</td>
</tr>
<tr>
	<td>Miloni</td><td>31</td>
</tr>
<tr>
	<td>Jammy</td><td>38</td>
</tr>
<tr>
	<td>Robert</td><td>21</td>
</tr>
</table>

HTML button

  • The buttons use to remove and add the table rows.
<button id="add_table_last">Add Last</button>
<button id="add_table_first">Add First</button>
<button id="remove_last">Remove Last</button>
<button id="remove_first">Remove First</button>

Add table row at the end of the table

  • tr:last is get the last table row.
  • after is the method in jquery for adding a new element.
$('#add_table_last').click(function(){
	$('#mytable tr:last').after('<tr><td>NEW NAME</td><td>NEW AGE</td></tr>');
});

Add table row at the beginning of the table (after the table title)

$('#add_table_first').click(function(){
	$('#mytable tr:first').after('<tr><td>NEW NAME</td><td>NEW AGE</td></tr>');
});

Remove table row at the end

$('#remove_last').click(function(){
	$('#mytable tr:last').remove();
});

Remove table row at the beginning (after the table title)

$('#remove_first').click(function(){
	$('#mytable tr:eq(1)').remove();
});

Example 1

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Table</title>
        <script 
            type="text/javascript" 
            src="/lib/jquery-1.7.2.min.js">				 
        </script>


        <script>
            $(document).ready(function() {
                $('#add_table_last').click(function(){
                    $('#mytable tr:last').after(
                    '<tr><td>NEW NAME</td><td>NEW AGE</td></tr>');
                });
				
                $('#add_table_first').click(function(){
                    $('#mytable tr:first').after(
                    '<tr><td>NEW NAME</td><td>NEW AGE</td></tr>');
                });
                $('#remove_last').click(function(){
                    $('#mytable tr:last').remove();
                });
                $('#remove_first').click(function(){
                    $('#mytable tr:eq(1)').remove();
                });
            });
        </script>
    </head>
    <body>

        <table border="1" id="mytable">
            <tr>
                <td>Name</td><td>Age</td>
            </tr>
            <tr>
                <td>Bob</td><td>23</td>
            </tr>
            <tr>
                <td>Miloni</td><td>31</td>
            </tr>
            <tr>
                <td>Jammy</td><td>38</td>
            </tr>
            <tr>
                <td>Robert</td><td>21</td>
            </tr>
        </table>
        <button id="add_table_last">Add Last</button>
        <button id="add_table_first">Add First</button>
        <button id="remove_last">Remove Last</button>
        <button id="remove_first">Remove First</button>
    </body>
</html>

Try It