JQuery: Setting .html for a table row not working for me
<p>I have never worked on jquery but after some googling and learning I have been able to use it in my application. I am trying to update a table row in my asp.net project but I am not able to update the table row by setting .html of it with the new data which I am receiving through a service.</p>

<p>I am prepopulating the table in the code behind so to generate the row and coloumns and also apply cssclass labels according to one of the ID. The ultimately render htmml of the table on the browser is as follows:</p>

<pre><code>&lt;table id="dataTable"&gt; 
&lt;tr class="Row1"&gt;   
&lt;td&gt;CC&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;1&lt;/td&gt; 
&lt;/tr&gt;
&lt;tr class="Row2"&gt;   
&lt;td&gt;CC&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;   
&lt;/tr&gt;
&lt;tr class="Row3"&gt;   
&lt;td&gt;CC&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;0&lt;/td&gt;&lt;td&gt;3&lt;/td&gt;   
&lt;/tr&gt;  
&lt;/table&gt; 
</code></pre>

<p>The code of my asp page through which I am trying to update the data row is as follows:</p>

<pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="_Default" %&gt;

&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head &gt;
    &lt;title&gt;Simple AJAX Service Client Page&lt;/title&gt;    
&lt;/head&gt;
&lt;body&gt;
    &lt;form id="form1" runat="server"&gt;
      &lt;asp:Table ID="dataTable" runat="server" /&gt;         
    &lt;/form&gt;

    &lt;script type="text/javascript" src='&lt;%= ResolveUrl("~/Scripts/jquery-1.4.1.js") %&gt;' &gt;&lt;/script&gt;
    &lt;script src="~/scripts/jquery-1.4.1.js" type="text/javascript"&gt;&lt;/script&gt; 

     &lt;script language="javascript" type="text/javascript"&gt;

         jQuery.ajaxSetup({
             // Disable caching of AJAX responses              
             cache: false         
         });


         $(document).ready(function () { setTimeout("countdown()", 1000); }); 

         function countdown() {

             $.getJSON("http://localhost:8732/Service/GetStat", null, function (result) {
                 for (var key = 0, size = result.length; key &lt; size; key++) {

                    var htmlstr =
                    '&lt;td&gt;'
                    + result[key].Name
                    + '&lt;/td&gt;&lt;td&gt;'
                    + result[key].Size
                    + '&lt;/td&gt;&lt;td&gt;'
                    + result[key].Count
                    + '&lt;/td&gt;&lt;td&gt;'
                    + result[key].Handle
                    + '&lt;/td&gt;&lt;td&gt;'
                    + result[key].ID
                    + '&lt;/td&gt;';

                    $('.Row' + result[key].ID).html = htmlstr //id values are like 1, 2, 3.....
                 }
             });

             setTimeout("countdown()", 1000);
         };     
    &lt;/script&gt;

&lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p>When I debug the code using Visual studio by putting the break point the value of the html that being formulated is in proper order (one of the sample value is as follows <code>&lt;td&gt;CC&lt;/td&gt;&lt;td&gt;18444289&lt;/td&gt;&lt;td&gt;6&lt;/td&gt;&lt;td&gt;248&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;</code>) and the variable value when debugging for ('.Row' + result[key].MonitorID) is like ROW1 and so on....</p>

<p>So why when setting the .html of this not working for me. Any help much appreciated.</p>

<p>Thank you.</p>
