How to change the rows of an HTML table using jQuery

Question

I am having an HTML table and I need to change it contents.

 <div id='adf'>
   <table id='tbl1' runat='server' >
     <tr><td></td></tr>
   </table>
 </div>

I am changing the contents using a jQuery Ajax and the problem is that I am accessing the same table with same name after that. So I am changing the HTML content and inserts new HTML of a table will adds a new table. So I need to remove the table rows and add the results to the table. So there will be no change in the contents. Thanks in advance.

Answer 1

If I understand you correctly, use the html() function to change the contents after you've run the ajax call.

As a efficiency tip, make sure you load all the changes into a string and just call html() once at the end. Otherwise, you'll find your page to be extremely slow.

If you are just adding new rows, use append(). http://api.jquery.com/append/

It shouldn't matter that the table has the same name. Just grab it by its identifier.

Answer 2

Look at this post

http://nithuan.wordpress.com/2010/08/30/dynamically-addind-table-row-using-jquery/

Answer 3

 $('#tbl1').html($('#tbl1').html() + "<tr><td>this is new row</td></tr>")

Answer 4

You need to use the ClientID of the table, because it is runat="server"

$.get('ajax/tbl1.html', function(data) {
     $('#' + <%= tbl1.ClientID %>).html(data);
});

tbl1.html would contain the replacement rows. You could change this to an aspx page or php or a webservice that returns html.

Here is a sample JQuery AJAX call that has worked for me in the past:

            jQuery.ajax({ type: "POST",
                url: "MyWebService.asmx/GetHtml",
                data: "{'Id' :'" + tableId + "'}", //may not be necessary in your case
                dataType: "json",
                contentType: 'application/json; charset=utf-8',
                success: function(json) {
                    var result = eval("(" + json.d + ")");
                    jQuery('#' + <%= tbl1.ClientID %>).html(result.value);
                }
             });

Note the use of JSON and the call to eval.