使用 jQuery 进行表操作 - 行数关闭答案

【问题标题】：Using jQuery for table manipulation - row count is off使用 jQuery 进行表操作 - 行数关闭
【发布时间】：2009-12-20 22:58:29
【问题描述】：

我在服务器 (C#) 上有一个循环来执行此操作：

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);

}

函数“Update”写入客户端 JavaScript 函数“PublishUpdate”。 row 参数是表中包含上传文件的行。 “状态”告诉我们文件是即将上传 (0) 还是即将完成 (1)。

问题是我似乎无法正确计数。循环似乎在表中开始 2 或 3 行，或者（在使用行值之后）它在最后一行。我对 jQuery 很陌生。在你看来，有什么明显的错误吗？

    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");

    });

}

最后，表格是这样的：

<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>
                            <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 ...

提前致谢。

【问题讨论】：

为什么大括号后面有);？
是的，对不起。我剪切并粘贴并错过了“}”。已完成更新，谢谢。
如果你真的想使用 ID 而不仅仅是行号，给行本身一个 ID 然后将单元格称为 $('#row2 .fnameCol') 或其他什么会更干净。

标签： c# jquery

【解决方案1】：

C# 使用零索引，通常 HTML 作者使用从一开始的索引。检查您是否需要将索引从 0 更正为 1，如下所示：

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

另外，将代码重构为更简单的代码通常可以修复隐藏的错误，或者至少使错误更加明显。我会建议一些类似的东西：

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

您还应该使用 C# 习惯用法进行循环，< x 而不是 <= x - 1：

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

【讨论】：

jQuery 的 "each" 方法从 0 开始索引。
是的，没错。他正在搜索“#status0”，但我敢打赌第一个元素在 HTML 中称为“#status1”。
感谢您的所有帮助。这是一个很好的猜测，但表格 ID 标签也从 0 开始（我将表格添加到我的帖子中）
谢谢马克。我根据您的建议清理了我的代码并添加了更长的延迟，以便我可以看到它以慢动作发生并且它运行良好。不知道到底是什么问题，但我相信你，因为它帮助了我的思考。再次感谢。

【解决方案2】：

我不完全确定您要做什么，因为不清楚#status 元素的位置。但是，假设它们是行内的单元格，最好给它们一个类“状态”，然后编写类似

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

【讨论】：