Question

I’m trying to make a table row highlight when I click a certain link. My table is generated by a foreach loop since I’m using 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>
}

Now, I need to make it run by clicking the a with select class, namely last one. I’ve found some reference here: JQuery highlight table row and I’ve been searching on Google how to come around this. But absolutely no reference yet.

What I’ve tried last is:

Css class for highlight: .highlighted { background-color: #c6df50 !important; }

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

I understand this would only add the class not remove it on other clicks, but even this won’t work.

Any help is appreciated, thanks.

JScript

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

I’ve placed this at the top of the page.

Rendered 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

Give an ID to your table, say “MyTable”

and add this line to your code

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

---

Ok so now that you have your hyperlinks with the project id along with each of them, when you click on any of the actions (select/delete/edit), set the project id in a tempdata

TempData["SelectedProductID"] = ID;

(sorry a viewbag doesn’t survive a RedirectToAction)

In the Index action of your controller, check if TempData["SelectedProductID"] is not null and if it is, set it to a viewbag

ViewBag.SelectedProduct = TempData["SelectedProductID"];

and this view bag will be available to you when you are looping through your razor code.

Something like this…

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