javascript - 如何将行号添加到动态添加到 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>

然后我有一个像下面这样格式化的部分 View

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

我正在使用此部分 View 向主视图中的表格动态添加行，这部分工作正常。

我正在努力的是在表格的第一列中添加行号，即(数字列)

下面是我如何在 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
                });
            });
        });
})`

Answer 1

添加 td: 让它工作。

这样就可以了

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

引用:https://api.jquery.com/eq-selector/