如何为动态添加到HTML表格中的行添加行号

Question

我有一个主视图，其中包含以下示例表定义。

<table id="myDynamicTable" cellpadding="0" cellspacing="0" width="964px">
        <thead>
            <tr id="uploadrow_0">
                <th" >
                    Number
                </th>
                <th">
                    Remarks
                </th>
            </tr>
        </thead>
        <tbody>
            @if (Model.myModel.Count > 0)
            {
                int i = 1;
                foreach (var item in Model.myModel)
                {
                    @Html.Partial("myModelPartial", item);
                     i += 1;
                }
            }
           else
            {
              @Html.Partial("myModelPartial", viewModel);
            }
        </tbody>
    </table>

我随后拥有一个部分视图，格式如下：

 @model myProject.ViewModel.mySampleViewModel
<tr>                
      @using (Html.BeginCollectionItem("NewRow"))
      {             
        <td class="tdBorder">
              @if (Model.Number != 0)
              {
                 @Html.LabelFor(x => Model.Number)
              }
              else
              {
                @Html.Label("Number", "0")
              }
        </td>
        <td>
            @Html.TextBoxFor(x => Model.Remark, new { id = "Remark"})
        </td>
      }       
</tr>

我将使用这个局部视图来动态地向我的主视图中的表格添加行，这一部分已经很好地工作了。

我遇到的问题是在表格的第一列中添加行号，即（数字列）。

下面是我在jQuery中添加行到表格的方式：

$(document).ready(function() {
        var tableBody = $('#myDynamicTable tbody');
        var url = '@Url.Action("Add", "Report")';
        $('#btnAddRow').click(function () {
            $.get(url, function (response) {
                tableBody.append(response);
                //auto number added rows
                $('#myDynamicTable tbody tr').each(function (idx) {
                    $(this).children(":eq(0)").html(idx + 1); //i'm trying to add the row number from here but this isn't working
                });
            });
        });
})`

- StackTrace

---

你的重新编号行的脚本运行良好（请参见此fiddle），但是你的问题中有很多奇怪的代码。为什么在主视图中有int i = 1;和i += 1;（你从未使用过i的值），为什么在部分视图中有一个if块，为什么它会创建一个<label>元素（因为不正确的for属性，单击它不会将焦点设置到相关的文本框）- 它可以简单地是<td class="tdBorder">@Model.Number)</td>。 - user3559349

为什么你要设置 new { id = "Remark"} 这样的代码呢？这会生成重复的 id 属性，而这是无效的 HTML。 - user3559349

@StephenMuecke 我实际上正在使用i的值，我只是删除了一些我认为对这个问题不必要的代码。 - StackTrace

脚本在 DotNetFiddle 上可以良好运行，所以如果它在你这里无法正常工作，我认为你可能省略了其它相关的代码 :) - user3559349

Answer 1

添加 td:，就可以让它正常工作。

所以这个方法是有效的。

       //auto number added rows
        $('#myDynamicTable tbody tr').each(function (idx) {
            $(this).children("td:eq(0)").html(idx + 1);
        });

Ref: https://api.jquery.com/eq-selector/

- StackTrace