Javascript 使用Jquery在表的每一行下添加额外的div

我有一个MVC 4应用程序，其中一个视图显示如下：

此视图的相应代码为：

<tbody>
   @foreach (var item in Model)
      {
        <tr id="document-row-@item.DocumentId">
           <td>                        
               @Html.DisplayFor(modelItem => item.DocumentName)
                 <div id="document-detail-contentsREVW">

                 </div>
           </td>

           <td>
               @Html.DisplayFor(modelItem => item.CreatedDate)
                  <div class="pull-right"> 
                           @Ajax.ActionLink("Details", "DocumentDetail", "Documents", new { Area = "SmartDocs", id = item.DocumentId.ToString() , currentStatus = item.CurrentStatus.ToString()}, new AjaxOptions
                        {
                           InsertionMode = InsertionMode.Replace,
                           HttpMethod = "GET",
                           LoadingElementId = "ajax-loader",
                           UpdateTargetId = "document-detail-contentsREVW",
                        }, new { @class = "details-link" })

                 </div>
            </td>
        </tr>
     }

---

问题是您给了所有元素相同的ID。除了是无效的html之外，

@Ajax.ActionLink（）

方法正在使用

ID=document detail contentsREVW

更新第一个元素（不一定是对应行中的元素）。您需要在循环中创建唯一的ID。如果您的模型是

IList

，则可以使用（例如）

---

问题是您为所有

元素提供了相同的ID（这是无效的html）。

Ajax.ActionLink

正在查找第一个匹配的ID并替换其内容。您需要在您的循环中生成唯一的ID。@StephenMuecke我是否需要在ready函数下使用jquery执行此操作，或者您可以告诉我有关此操作的更多详细信息。谢谢您的帮助，但我在这里有点困惑，因为我的是Ienumerable，我尝试在foreach循环外声明一个计数器并与您的答案集成，但我再次在m=>m[I].DocumentName处遇到错误。您能研究一下这个问题吗。这非常有效。谢谢。现在如果您看到我的问题，也可以看到我在脚本中使用的id文档详细内容Revw，以将div部分切换为live（单击函数）。那么，既然该div不再以该名称存在，那么如何在脚本中使用该div的id呢？首先，不要使用

.live（）

，它在jquery 1.7中被折旧，在1.9中被删除（改为使用

.on（）

）。您尚未发布脚本，因此无法给出详细的解决方案，但建议您也给

一个类名（说“文档详细信息”），然后在

.click（）

事件中，选择相应的

，例如

$（this）。最近（'tr'）。查找（'.document details'）。切换（）

再次感谢..删除了live并在我的脚本中使用。跟随您，它工作得非常好。非常感谢Stephen@Saroj，我上面的建议切换了可见性。

的初始状态是可见的，因此第一次单击会将其隐藏。在document ready函数中，首先将所有

的状态设置为使用

$（'.document details'）.hide（）；

隐藏。

   $(function () {
        $('.details-link').on('click', function (e) {
            e.preventDefault();
            $(this).closest('tr').find('.document-details').toggle();
            $(this).text(function (i, v) {
                return v === 'Details' ? 'Hide' : 'Details';
            });
        });
    });

@for (int i = 0; i < Model.Count; i++)
{
  var id = string.Format("document-detail-{0}", i);
  <tr id="document-row-@item.DocumentId">
    @Html.DisplayFor(m => m[i].DocumentName)
    <div id=@id></div> // id will be "document-detail-0", "document-detail-1" etc
    ....
    @Ajax.ActionLink("Details",.....
    {
      ....
      UpdateTargetId = @id,

@{int i = 0;} // declare counter
@foreach (var item in Model)
{
  var id = string.Format("document-detail-{0}", i++);
  <tr id="document-row-@item.DocumentId">
    @Html.DisplayFor(m => item.DocumentName) // same as before
    <div id=@id></div>
    ....
    @Ajax.ActionLink("Details",.....
      ....
      UpdateTargetId = @id,