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.

It would help if you post your ajax code. The answer will depend on the content type of your ajax call. — Daniel Dyson
– Daniel Dyson, Commented Oct 6, 2010 at 9:24

julie-ng · Accepted Answer · 2010-10-06 09:19:28Z

2

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.

answered Oct 6, 2010 at 9:19

julie-ng

5507 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

kbvishnu Over a year ago

thanks jng5 let me check.Can I use $('#abc').html(res) ? where res is ajax result ??

julie-ng Over a year ago

It depends, what does res look like? If it has <table> etc. included, should work. If it's just rows, use $('#tbl1').html(res);

Mahmoud Farahat · Accepted Answer · 2010-10-06 09:30:57Z

1

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

answered Oct 6, 2010 at 9:30

Mahmoud Farahat

5,4814 gold badges46 silver badges63 bronze badges

Comments

Nithesh Narayanan · Accepted Answer · 2010-10-06 09:27:16Z

0

Look at this post

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

answered Oct 6, 2010 at 9:27

Nithesh Narayanan

11.8k35 gold badges102 silver badges140 bronze badges

3 Comments

kbvishnu Over a year ago

$(‘ tblDoc tr:last’).after( “<tr>”+“<td style=’width:150px;’><span>” + getTextBoxValue(‘<%=txtDocName.ClientID %>’) + “</span></td><td style=’width: 150px’>” + getTextBoxValue(‘<%=txtDocNo.ClientID %>’) + “</td><td style=’width: 150px’>” + getTextBoxValue(‘<%=txtIssuedBy.ClientID %>‘) + “</td><td style=’width: 150px’>” + getTextBoxValue(‘<%=txtIssuedDate.ClientID %>’) + “</td><td style=’width: 150px’>” + getTextBoxValue(‘<%=txtRenewalDate.ClientID %>’) + “</td></tr>” ); what this is to add a new row after the particular row

kbvishnu Over a year ago

What I need is to change the entire row with the data from server?

Nithesh Narayanan Over a year ago

you may use the $ajax methode of jquery

Daniel Dyson · Accepted Answer · 2010-10-06 10:18:50Z

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.

Collectives™ on Stack Overflow

How to change the rows of an HTML table using jQuery

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related