jquery - JQuery A href 点击表格行高亮

Question

当我单击某个链接时，我试图突出显示表格行。foreach因为我使用的是 MVC3 Razor，所以我的表是由循环生成的。

@foreach (var item in Model) {
    <tr class="trow">
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateCreated)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateEdited)
        </td>
        <td>
            <a href='@Url.Action("Edit", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Edit16x16.png")' title="Edit"/></a> &nbsp;
            <a href='@Url.Action("Details", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Details16x16.png")' title="Details" /></a> &nbsp;
            <a href='@Url.Action("Delete", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Delete16x16.png")' title="Delete" /></a> &nbsp;
            <a href='@Url.Action("Select", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Select16x16.png")' title="Select" class="select" /></a> 
        </td>
    </tr>
}

a现在，我需要通过单击withselect类（即最后一个）使其运行。我在这里找到了一些参考资料：JQuery highlight table row，我一直在谷歌上搜索如何解决这个问题。但绝对没有参考。

我最后尝试的是：

用于突出显示的 CSS 类：.highlighted { background-color: #c6df50 !important; }

$('.select').click(function() {
    $(this).parent().addClass('highlighted');
});

我知道这只会添加类而不是在其他点击时将其删除，但即使这样也行不通。

任何帮助表示赞赏，谢谢。

脚本

<script type="text/javascript">
    $(document).ready(function () {
        $('.select').click(function () {
            $('#projTable').removeClass('highlighted');
            $(this).parent().parent().addClass('highlighted');
        });    
    });
</script>

我把它放在页面的顶部。

呈现的 HTML

        <table id="projTable">
        <tr>
            <th>
                Name
            </th>
            <th>
                Author
            </th>

            <th>
                Date Created
            </th>
            <th>
                Date Edited
            </th>
            <th style="text-align:right;"> <a href="/Project/Create"><button>&nbsp;Create&nbsp;</button></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</th>
        </tr>

        <tr class="trow">
            <td>
                Test Project1
            </td>
            <td>
                Me
            </td>

            <td>
                8/6/2012 2:05:36 AM
            </td>
            <td>
                8/6/2012 2:05:36 AM
            </td>
            <td>
                <a href='/Project/Edit/1'><img src='/Content/images/Edit16x16.png' title="Edit"/></a> &nbsp;
                <a href='/Project/Details/1'><img src='/Content/images/Details16x16.png' title="Details" /></a> &nbsp;
                <a href='/Project/Delete/1'><img src='/Content/images/Delete16x16.png' title="Delete" /></a> &nbsp;
                <a href='/Project/Select/1' class="select" ><img src='/Content/images/Select16x16.png' title="Select" /></a> 
            </td>
        </tr>
        <tr class="trow">
            <td>
                Test Project 2
            </td>
            <td>
                Me
            </td>

            <td>
                8/7/2012 9:06:11 AM
            </td>
            <td>
                8/7/2012 9:06:11 AM
            </td>
            <td>
                <a href='/Project/Edit/2'><img src='/Content/images/Edit16x16.png' title="Edit"/></a> &nbsp;
                <a href='/Project/Details/2'><img src='/Content/images/Details16x16.png' title="Details" /></a> &nbsp;
                <a href='/Project/Delete/2'><img src='/Content/images/Delete16x16.png' title="Delete" /></a> &nbsp;
                <a href='/Project/Select/2' class="select" ><img src='/Content/images/Select16x16.png' title="Select" /></a> 
            </td>
        </tr>

score 1 · Accepted Answer

给你的桌子一个 ID，说“MyTable”

并将这一行添加到您的代码中

$('.select').click(function() {
    $('#MyTable tr').removeClass("highlighted"); // removes all the highlights from the table
    $(this).parent().addClass('highlighted');
});

好的，现在您已经拥有带有项目 ID 的超链接以及每个项目，当您单击任何操作（选择/删除/编辑）时，在临时数据中设置项目 ID

TempData["SelectedProductID"] = ID;

（抱歉，viewbag 无法生存RedirectToAction）

在控制器的 Index 操作中，检查是否TempData["SelectedProductID"]不为空，如果是，则将其设置为 viewbag

ViewBag.SelectedProduct = TempData["SelectedProductID"];

当您循环浏览剃须刀代码时，您可以使用此视图包。

像这样的东西...

@foreach (var item in Model) {
   @if (ViewBag.SelectedProduct == item.ID)
   {
    <tr class="trow">
    }
    else
    {
    <tr class="trow" class="highlighted">
    }

score 0 · Accepted Answer

它不会起作用，因为你有 id="select" 而不是使用 class="select"。以下应该工作：

CSHTML

@foreach (var item in Model) {
    <tr class="trow">
        <td>
            @Html.DisplayFor(modelItem => item.Name)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Author)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateCreated)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.DateEdited)
        </td>
        <td>
            <a href='@Url.Action("Edit", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Edit16x16.png")' title="Edit"/></a> &nbsp;
            <a href='@Url.Action("Details", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Details16x16.png")' title="Details" /></a> &nbsp;
            <a href='@Url.Action("Delete", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Delete16x16.png")' title="Delete" /></a> &nbsp;
            <a href='@Url.Action("Select", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Select16x16.png")' title="Select" class="select" /></a> 
        </td>
    </tr>
}

脚本

$('.select').click(function() {
  $parentRow = $(this).parent().parent();
  if ($parentRow.hasClass('highlighted'))
    $parentRow.removeClass('highlighted');
  else
    $parentRow.addClass('highlighted');
});

希望有帮助...

score 0 · Accepted Answer

我用了

<a href='@Url.Action("Select", "Project", new { id = item.ProjectID })'><img src='@Url.Content("~/Content/images/Select16x16.png")' title="Select" class="select" /></a>

进而

$(document).on('click', '.select', function (evt) {

            $parentRow = $(this).parent().parent();
            $('#projTable tr').removeClass("highlighted");
            $parentRow.addClass('highlighted');

        });

它对我有用............

jquery - JQuery A href 点击表格行高亮

3 回答 3

Related

Reference