How to change the rows of an HTML table using jQuery
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 开发者_如何学JAVAjQuery 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.
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.
$('#tbl1').html($('#tbl1').html() + "<tr><td>this is new row</td></tr>")
Look at this post
http://nithuan.wordpress.com/2010/08/30/dynamically-addind-table-row-using-jquery/
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.
精彩评论