Total members 11889 |It is currently Thu Mar 28, 2024 5:32 pm Login / Join Codemiles

Java

C/C++

PHP

C#

HTML

CSS

ASP

Javascript

JQuery

AJAX

XSD

Python

Matlab

R Scripts

Weka





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>




_________________
M. S. Rakha, Ph.D.
Queen's University
Canada


Author:
Mastermind
User avatar Posts: 2715
Have thanks: 74 time
Post new topic Reply to topic  [ 1 post ] 

  Related Posts  to : Add new row dynamically to table using JQuery
 Sort HTML table from JQuery     -  
 Calling Functions Dynamically     -  
 Dynamically Create Image     -  
 change link <a> attributes dynamically     -  
 Uplading Files Dynamically Using SSIS     -  
 invoke class method dynamically in php     -  
 Add and Remove CSS classes to html tag dynamically     -  
 Dynamically Setting and Accessing Variables     -  
 How To Store Date Dynamically as a field in mysql using JSP     -  
 AJAX Login Code getting username and password dynamically .     -  



Topic Tags

JQuery Table
cron





Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
All copyrights reserved to codemiles.com 2007-2011
mileX v1.0 designed by codemiles team
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com