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和select类来运行它，即最后一个。我在这里找到了一些参考：JQuery highlight table row我一直在Google上搜索如何解决这个问题。但绝对没有参考。

我上次尝试的是：

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

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

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

感谢任何帮助，谢谢。

的JScript

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

Answer 1

为您的表格提供一个ID，说“MyTable”

并将此行添加到您的代码

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

好了，现在你有了项目ID的超链接以及每个超链接，当你点击任何一个动作（选择/删除/编辑）时，在tempdata中设置项目ID

TempData["SelectedProductID"] = ID;

（抱歉，一个视图包不能存在RedirectToAction）

在控制器的“索引”操作中，检查TempData["SelectedProductID"]是否为空，如果是，则将其设置为视图包

ViewBag.SelectedProduct = TempData["SelectedProductID"];

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

像这样......

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

Answer 2

它不会起作用，因为它不是使用类=＆＃34;选择＆＃34;你有id =＆＃34;选择＆＃34;。以下应该工作：

<强> 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>
}

<强>的JScript

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

希望有帮助...

Answer 3

我用过

<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一个href单击表格行突出显示

3 个答案: