如何将行号添加到动态添加到html表的行中

时间:2016-02-01 14:06:21

标签: javascript jquery asp.net-mvc html-table

我有一个主视图,它具有以下样本表定义。

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

1 个答案:

答案 0 :(得分:0)

添加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/