JQuery Manipulate HTML Table
From w3cyberlearnings
Contents |
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 TRY-IT
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Table</title>
<script
type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(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>
Related Links
Jquery and HTML Elements
