Curious2learn Curious2learn - 10 months ago 36
Ajax Question

Using jquery .load to add rows to an html table

The code below adds the

returned by
function in the server to the table that has id
. The html returned by the function
is of the form:

"<tr><td>some text</td><td>more text</td></tr><tr><td>some text</td><td>more text</td></tr><tr><td>some text</td><td>more text</td></tr>"

As you can see in the code I am using
from jquery to obtain the
from the server and add it to the table. The code I am using, however, replaces the existing rows in the table instead of adding to it. How can I use jQuery
function to add the rows to existing rows and not replace them?

If I can somehow assign the html received from the
function to a variable say
, I can do something like
. But I don't know how to assign the html obtained by
to a variable, or to use it as a string.


The Code:

Create table using jquery

<p>Method 2</p>

<table id="resultstable2">

<button id="b2">Execute returndatafromdb2()</button>

<script type="text/javascript">

cache: false

var getdata2 = function(){
var loadurl2 = "{{=URL('default', 'returndatafromdb2')}}";



Answer Source

There isn't a way to do it with the load() function. You will want to use the normal ajax calls and write your own callback function. Something like this:

var getdata2 = function() {

    var loadurl2 = "{{=URL('default', 'returndatafromdb2')}}";