Let's say you have this table a boys list

Name Age Fruit
Archie 20 apple
Jimmy 30 orange

and you want to change the table data dynamically using jquery, let's say make it a girls list with the following items
Kristine 18 peach
Vanessa 25 strawberry
and the table will update by cliking the update to girls list button

1. first lets make an html file and paste this code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head> <body>
<table width="100%" border="1" background="#eee" cellspacing="1" cellpadding="2">
<tr>
<th bgcolor="#eee"><strong>Name</strong></th>
<th bgcolor="#eee"><strong>Age</strong></th>
<th bgcolor="#eee"><strong>Fruit</strong></th>
</tr>
<tr>
<td>Archie</td>
<td>20</td>
<td>apple</td>
</tr>
<tr>
<td>Jimmy</td>
<td>30</td>
<td>orange</td>
</tr>
</table>
</body>
</html>
2. add jquery put this inside the <head> tag
<script type="text/javascript" src="jquery.js"></script>
3. Puy a script tag immediately after the <body> tag
<script></script>
4. build the table rows for the girls list and assign it to a java script variable, this should be done inside the <script> tag, it should look like this
<script> var msg="<tr><td>Kristine</td><td>18</td><td>peach</td></tr><tr><td>Vanessa</td><td>25</td><td>strawberry</td></tr>"; </script>
5. create an input button type this anywhere inside the <body> tag,
<input type="button" value="update to girls list" />
6. put an action to the button this should be done also inside the script tag we made earlier just insert it
<script> var msg="<tr><td>Kristine</td><td>18</td><td>peach</td></tr><tr><td>Vanessa</td><td>25</td><td>strawberry</td></tr>"; $(document).ready(function(){ $("input").click(function(){ $( "table tr:first").siblings().remove(); $("table tr:first").after(msg); }); }); </script>

why tr:first - represents the first row on your table which is the header that containes the Name Age Fruit text
why $("table tr:first").siblings().remove();, we need to remove all the rows below the header first, because we're gonna update it.
why $("table tr:first").after(msg); we insert the value of msg after the header.

7. Youre done, if you click the button it will update.

NOTE: if you do not understand my step by step here's the whole working code just copy and paste it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script type="text/javascript" src="jquery.js"></script>
</head> <body>
<script> var msg="<tr><td>Kristine</td><td>18</td><td>peach</td></tr><tr><td>Vanessa</td><td>25</td><td>strawberry</td></tr>"; $(document).ready(function(){ $("input").click(function(){ $( "table tr:first").siblings().remove(); $("table tr:first").after(msg); }); }); </script>
<table width="100%" border="1" background="#eee" cellspacing="1" cellpadding="2">
<tr>
<th bgcolor="#eee"><strong>Name</strong></th>
<th bgcolor="#eee"><strong>Age</strong></th>
<th bgcolor="#eee"><strong>Fruit</strong></th>
</tr>
<tr>
<td>Archie</td>
<td>20</td>
<td>apple</td>
</tr>
<tr>
<td>Jimmy</td>
<td>30</td>
<td>orange</td>
</tr>
</table>
<input type="button" value="update to girls list" />
</body>
</html>

This example is best used for ajax web apps which updates table data dynamically I will make an ajax example next just follow my updates