Search jQuery

jQuery Forum

Show table row options to the left on hover

in Using jQuery • 5 years ago

I have a table on an app that im creating (DataTables currently), and as you can see below, its rather packed with columns, and unfortunately, all of them are necessary.

I wanted to hide the three left columns, Delete/Visibility/Primary, to make more space on the table. But theya re still needed, so I was thinking maybe make it so when you hover over the row, it shows the 3 options to the left of it, making it look like the row is extended or something.

Does anyone know how I could do that? Just add a div or span or something to the left of the row that shows only on hover, and make it the exact hight and position of the row?

Thanks for any help!

Replies(5)

jakecigar

Re: Show table row options to the left on hover

5 years ago

You can’t "just add" a div or span in the middle of a table. You can make things appear inside a <td> making the <td> have a greater height.

You could use a panel(div) that appears when you hover that is at the position of the <tr> you are in, but that would obscure the name column.

JΛ̊KE

justinhyl..

Re: Show table row options to the left on hover

5 years ago

You could use a panel(div) that appears when you hover that is at the position of the <tr> you are in, but that would obscure the name column.

Thats kinda what i meant.

I was asking if anyone had a quick way to show a div on the left side of the table that would "look" as if the row was expanded a little, with some options. A div thats the same height as the row, about 150px or so in width, that shows up when you hover over the row (and stays visible when you bring the cursor over to it), but disappears when you hover over a different row, that would suffice.

jakecigar