Using jQuery for table manipulation - row count is off

I have a loop on the server ( C# ) that does this:

for(i=0;i<=Request.Files.Count - 1; i++)
{
   // tell the client that the upload is about to happen
   // and report useful information
   Update(percent, message, i, 0);

   System.Threading.Thread.Sleep(1000);

   // tell the client that upload succeeded
   // and report useful information
   Update(percent, message, i, 1);

}

The function "Update" writes to the client-side javascript function "PublishUpdate". The row parameter is the row in the table containing the uploading file. The 'status' tells us if the file is about to be uploaded (0) or completed (1).

THE PROBLEM is that I can't seem to get the count correct. The loop seems to start 2 or 3 rows into the table or (after playing with the row value) it ends before the final row. I am very new to jQuery. Does anything look obviously wrong to you?

    function PublishUpdate(percent, message, row, status) 
    {
       var bodyRows = $("#picTableDisplay tbody tr");

           bodyRows.each(function(index){
               if (index == row && status == 0)                
                $('#status'+index).html("<img alt='inproc' src='images/loading.gif' />");
               else if (index == row && status == 1)
                $('#status'+index).html("complete");

    });

}

Finally, the table looks like this:

<table width="100%" cellspacing="0" cellpadding="3" border="0" align="center" id="picTableDisplay" summary="" class="x-pinfo-table">
                        <tbody id="files_list" class="scrollContent">
                            <tr class="evenRow">
                                <td class="numCol" id="num0">
                                </td>
                                <td class="fnameCol" id="fname0">
                                </td>
                                <td class="statusCol" nowrap="" id="status0">
                                </td>
                                <td class="remCol" id="rem0">
                                </td>
                            </tr>
                            &开发者_开发问答lt;tr class="oddRow">
                                <td class="numCol" id="num1">
                                </td>
                                <td class="fnameCol" id="fname1">
                                </td>
                                <td class="statusCol" nowrap="" id="status1">
                                </td>
                                <td class="remCol" id="rem1">
                                </td>
                            </tr>
                            <tr class="evenRow">
                                <td class="numCol" id="num2">
                                </td>
                                <td class="fnameCol" id="fname2">
                                </td>
                                <td class="statusCol" nowrap="" id="status2">
                                </td>
                                <td class="remCol" id="rem2">
                                </td>
                            </tr>
                            AND SO ON ...

Thanks in advance.

The C# is using zero indexing, and typically HTML authors use indexing starting from one. Check to see if you need to correct the index from 0 to 1-based, like this:

$('#status' + (index + 1))

Also refactoring your code to something simpler can often fix hidden errors, or at least make the error more obvious. I'd suggest something along these lines:

if (index == row)
{
    if (status == 0) {
        html = "<img alt='inproc' src='images/loading.gif' />";
    } else {
        html = "complete";
    }
    $('#status'+index).html(html);
}

You should also use C# idiom for looping, < x not <= x - 1:

for(i=0; i < Request.Files.Count; i++)

I'm not entirely sure what you're trying to do as it's not clear where the #status elements are. However, assuming they're cells within the row it might be better to give them a class "status" and then write something like

function PublishUpdate(percent, message, row, status) {
    $('#picTableDisplay tbody tr:eq('+row+') .status').html(
        status==0 ? '<img alt="inproc" src="images/loading.gif"/>' : 'complete'
    );
}