Question

我已经查看了在编辑或删除表格行后重新加载视图时出现黄色淡入淡出效果的上一个问题。

所以我的问题是这个。如果我将<div id="target">Highlight Me</div>放入视图中，我可以使代码正常工作。每次加载页面时都会正确突出显示。

我的问题是，当我在这个div中放置一个表格行与其他单元格等时，它并不突出显示。我对jQuery和MVC 4相当新，所以任何帮助都会非常感激。

我的观看代码如下：

  @model List<SecureFileUploadTraining.Models.FilesUpload> 

@{
    ViewBag.Title = "Uploader";
}

@section scripts{
    <script src="~/Scripts/jquery-ui-1.11.4.js" type="text/javascript"></script>
    <script src="~/Scripts/YellowFade.js" type="text/javascript"></script>
}
<hgroup class="title">
    <!--<h1>@ViewBag.Title.</h1>-->
    <h1>@ViewBag.Message</h1>
    <h2>@ViewBag.sqlString</h2>
</hgroup>

<article>
<div id="target">Highlight Me</div>

<h4>Manage My Files</h4>
@if (Model.Count > 0)
{
    <table>
     <th>Filename</th>
     <th colspan='2'>Expiry date</th>
     <th>Status</th>
     <th colspan='3'>Actions</th>
     @foreach (var item in Model)
     {
         <div id='target'>
         <tr>         
         <td>@item.Original_file_name</td>
         <td>@item.Expiry_date.ToShortDateString()</td>
         <td>
         <img src='~/Images/extend.png' width='13px' onclick="location.href='@Url.Action("ExtendExpiry", "Upload", new { File_id = @item.File_id })'" alt="Extend expiry date"/>
         <img src='~/Images/minus.png' width='13px' onclick="location.href='@Url.Action("ReduceExpiry", "Upload", new { File_id = @item.File_id })'" alt="Reduce expiry date"/>
         </td>

         @if (@item.File_status.ToString() == "Deleted")
         {
              <td><span class ="deleted">@item.File_status</span></td>
         }
         else
         {
             <td><span class ="current">@item.File_status</span></td>
         }

         @if (@item.File_status.ToString() == "Deleted")
         {
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>
             @Html.ActionLink("Restore", "RestoreFile", new { File_id = @item.File_id })
             </td>
         }
         else
         { 
             <td>
            @Html.ActionLink("Download", "Download", new { OriginalImageName = @item.Original_file_name, ImageName = @item.Current_file_name, ImageType = @item.File_type })
             </td>
            <td>
            @Html.ActionLink("Access", "ManageAccess", new { File_id = @item.File_id, File_name = @item.Current_file_name })
            </td>
            <td>
             @Html.ActionLink("Delete", "DeleteFile", new { File_id = @item.File_id })
            </td>
         }
         </tr>
         </div>
     }

     </table>

}
else
{
     <h4>No files currently available.</h4>
}

 <p>* 
 @Html.ActionLink("Upload Files", "FileUpload", "FileUpload", routeValues: null, htmlAttributes: new { id = "registerLink" })</h4></li>
 </p>
 <hr /><p>* 
  @Html.ActionLink("View files available to download", "Downloader", "Download", routeValues: null, htmlAttributes: new { id = "registerLink" })</h4></li>
 </p><hr />
 </article>

创建高光效果的功能代码是：

jQuery.fn.highlight = function () {
    $(this).each(function () {
        var el = $(this);
        $("<div/>")
        .width(el.outerWidth())
        .height(el.outerHeight())
        .css({
            "position": "absolute",
            "left": el.offset().left,
            "top": el.offset().top,
            "background-color": "#ffff99",
            "opacity": ".7",
            "z-index": "9999999"
        }).appendTo('body').fadeOut(1000).queue(function () { $(this).remove(); });
    });
}

$("#target").highlight();

我不确定我需要做什么来获取它，以便当用户点击删除或+或 - 图标时页面重新加载并突出显示正确的行。

Answer 1

如何在<tr>内写下DIV代码？

不要使用DIV，使用连接item-id的小技巧为每一行分配一个id，以避免重复的id。像这样，

<table>
     <th>Filename</th>
     <th colspan='2'>Expiry date</th>
     <th>Status</th>
     <th colspan='3'>Actions</th>
     @foreach (var item in Model)
     {
         string tmpId = "target_" + item.id;
         <tr id='@tmpId'>
         <td>@item.Original_file_name</td>
         <td>@item.Expiry_date.ToShortDateString()</td>
         <td>
         <img src='~/Images/extend.png' width='13px' onclick="location.href='@Url.Action("ExtendExpiry", "Upload", new { File_id = @item.File_id })'" alt="Extend expiry date"/>
         <img src='~/Images/minus.png' width='13px' onclick="location.href='@Url.Action("ReduceExpiry", "Upload", new { File_id = @item.File_id })'" alt="Reduce expiry date"/>
         </td>

         @if (@item.File_status.ToString() == "Deleted")
         {
              <td><span class ="deleted">@item.File_status</span></td>
         }
         else
         {
             <td><span class ="current">@item.File_status</span></td>
         }

         @if (@item.File_status.ToString() == "Deleted")
         {
             <td>&nbsp;</td>
             <td>&nbsp;</td>
             <td>
             @Html.ActionLink("Restore", "RestoreFile", new { File_id = @item.File_id })
             </td>
         }
         else
         { 
             <td>
            @Html.ActionLink("Download", "Download", new { OriginalImageName = @item.Original_file_name, ImageName = @item.Current_file_name, ImageType = @item.File_type })
             </td>
            <td>
            @Html.ActionLink("Access", "ManageAccess", new { File_id = @item.File_id, File_name = @item.Current_file_name })
            </td>
            <td>
             @Html.ActionLink("Delete", "DeleteFile", new { File_id = @item.File_id })
            </td>
         }
         </tr>
     }

     </table>

希望这会有所帮助。感谢。

在MVC4中使用JQuery的黄色淡入淡出效果

1 个答案: