Add new row dynamically to table using JQuery

Thu Jan 10, 2013 3:59 pm

Add new row dynamically with JQuery, when press on link automatic update to table happens:
javascript code

<html>
<head>
<title>Add new row to table using JQuery</title>
 
<!--
 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
 Note you can download the JQuery package instead of using Google version. --> 
<script src="jquery-1.8.3.js"></script>
 
 

<script>

    $(document).ready(function() { 
 
    $("#LinkToAdd").click(function() { 
         $.get("tableContent.html", function(html) { 
             // append the "ajax'd" data to the table body 
             $("#bodyTable").append(html); 
 
        }); 
        return false; 
    }); 
});      
</script>

</head>
<body>
	<table  class="tablesorter" border="1px"> 
<thead> 
<tr> 
    <th>ID</th> 
    <th>Student Name</th> 
    <th>Department</th> 
    <th>Class</th> 
    <th>GPA</th> 
</tr> 
</thead> 
<tbody id="bodyTable"> 
<tr> 
    <td>323</td> 
    <td>Smith</td> 
    <td>Computer Science</td> 
    <td>C1</td> 
    <td>3.4</td> 
</tr> 
<tr> 
    <td>345</td> 
    <td>Johan</td> 
    <td>Computer Science</td> 
    <td>A1</td> 
    <td>2.7</td> 
</tr> 
<tr> 
    <td>21</td> 
    <td>Ali</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.0</td> 
</tr> 
<tr> 
    <td>33</td> 
    <td>Tonson</td> 
    <td>Electric Engineering</td> 
    <td>EE4</td> 
    <td>3.2</td> 
</tr> 
</tbody> 
</table> 
    <a href="#" id="LinkToAdd">Load more data to table</a>
</body>
</html>

row to be loaded , for sure you can force the ajax call to load from a dynamic web page that loads from database or something.
tableContent.html:
html code

<tr> 
    <td>343</td> 
    <td>James</td> 
    <td>Physics</td> 
    <td>PH1</td> 
    <td>1.6</td> 
</tr>

Add new row dynamically to table using JQuery

Add new row dynamically to table using JQuery

Topic Tags