JQuery A href click table row highlight

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>

instead of addClass you should use toggleClass to remove the highlight on a second click. Try if your click function is called with a log message or an alert — Chris
– Chris, Commented Aug 7, 2012 at 6:45
You should remove the "highlighted" style from all rows before you add that class. — Jack7
– Jack7, Commented Aug 7, 2012 at 6:47
Now that's weird... @Raminson I realize that Razor and JQuery have nothing to do with each other, just pointing out every detail, how I've written the code exactly, so someone may correct me if mistaken somewhere... SiGanteng: Weird... I must double check it, now... — rexdefuror
– rexdefuror, Commented Aug 7, 2012 at 6:48
@Jack7 Yeah thats for the part where everything works properly :) I'm not there yet, I think... Any suggestions how to remove it from all rows inside that click function? — rexdefuror
– rexdefuror, Commented Aug 7, 2012 at 6:49

Jack7 · Accepted Answer · 2012-08-07 09:21:46Z

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

edited Aug 7, 2012 at 9:21

answered Aug 7, 2012 at 6:49

Jack7

1,35112 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

rexdefuror Over a year ago

Thanks, will try all this now.

Jack7 Over a year ago

could you post a few rows of the table that gets rendered so we get an idea of how that looks like

rexdefuror Over a year ago

Oh dear, I just noticed that I'm returning the RedirectToAction("Index") in my codebehind for the action that link starts up... That's why it won't remain selected... it removes it after refresh -_-... Any idea how to go around this. (note. it has to redirect it even though it's the same page)

Jack7 Over a year ago

If you are redirecting to action that's returning a view, then the only other thing to do would be to store that selected row (by some indicator like ID) in a session and then use that add the style while rendering it using razor. You might not need the jquery bit at all now. If you're not comfortable with using a session you could also use a viewbag to set the selected row.

rexdefuror Over a year ago

Solved without JQuery and without ViewBag :D After a good sleep everything is easy xD Picking your answer as right one since you helped me in comments :D I already had a session variable i use for checking if project was selected but i used it to pass values to controllers, and ofc keep it while session lasts. Just used the same with similar logic as yours. :D Thanks

Van Dame · Accepted Answer · 2012-08-07 06:52:39Z

0

It won't work because instead of using a class="select" you have id="select". Following should work:

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');
});

Hope that helps...

answered Aug 7, 2012 at 6:52

Van Dame

1594 silver badges13 bronze badges

2 Comments

rexdefuror Over a year ago

That's exactly what I just did. It won't work :( The script doesn't fire up at all...

rexdefuror Over a year ago

I'll update my question with code I've used exactly and maybe you can notice my mistake...

user3501613 · Accepted Answer · 2015-09-21 12:54:32Z

0

i used

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

and then

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

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

        });

its worked for me...........

answered Sep 21, 2015 at 12:54

user3501613

6402 gold badges13 silver badges33 bronze badges

Collectives™ on Stack Overflow

JQuery A href click table row highlight

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related