ansaurus

Question

Mouseover for entire row in MVC

Answer 1

A:

Use something like $(".TableRowClass").mouseOver(function(){ $("#colName").addClass("show")});

And to hide simply use mouseOut and removeClass("show");

This is of course untested but if you need specific code then let me know and I'll post code.

Edit

I should mention that the code is in jQuery.

Edit 2

The below works just fine. Some tweaking required.

   $(".hideShowSample").mouseover(function() {
        $(".hideShowSample #colToHide").removeClass("hideColumn");
    });
    $(".hideShowSample").mouseout(function() {
        $(".hideShowSample #colToHide").addClass("hideColumn");
    });
<style>
    .hideShowSample {}
    .hideColumn { display:none; }
</style>

<table>
    <tr class="hideShowSample">
        <td>$100.00</td>
        <td>Cheap stuff to buy.</td>
        <td id="colToHide" class="hideColumn">Backordered</td>
    </tr>
</table>

griegs 2009-10-09 04:07:43

I personally would suggest $("#colName").hide(); and $("#colName").show(); cleaner css and you can set the time or "slow"

Hurricanepkt 2009-10-09 04:19:40

Not a bad idea @Hurricanepkt if the goal is for animation yeah.

griegs 2009-10-09 04:24:20

Hm, I am not sure about setting display:none for a table cell. This _might_ cause akward behaviour for the whole table if it contains more then one row. I normally avoid this and rather put a <div> inside the <td>, and then hide that <div> like so: .hideColumn { visibility:hidden } that also prevents the <td> from "jumping" into view when it contains larger content.

Max 2009-10-09 04:36:44

@griegs thanks it works but when i get more rows using foreach means its not working. for each row if i make mouse over means it want to show the particular column.

kart 2009-10-09 04:38:43

That's entirely valid @Max and a pretty good point. I think if you put all three of these posts together you'd have a damn good solution.

griegs 2009-10-09 04:39:36

@unknow, each column must have a unique id and you must reference that id within the jQuery. You might wish to put in place what max suggested which meand you could do something like ".hideShowSample .colToHide div".hide("slow"); Untested but looks about right.

griegs 2009-10-09 04:41:52

In which case replace the id with "" and change the class to "colToHide" and set the display of the div within the td to none. Make sense?

griegs 2009-10-09 04:43:08

ansaurus

tags:

views:

answers:

Mouseover for entire row in MVC

related questions