views:

74

answers:

3

Maybe what I am trying to accomplish is not feasible but the general idea is that when a person clicks a table row, the page dims (like a modal) but leaves that row visible for editing. I tried setting the z-index of the table row itself but it did not work. It will work if I set the table rows position attribute to absolute but that seems to remove the table row from the table completely.

+2  A: 

If you're using jQuery, try this:

$("<get the tr>").css("z-index", <value>);
Sidharth Panwar
did you read the entire question or are you just answering the title?
Russ Bradberry
I did read the title and give only a cursory look to the entire question. But that's only because the title was very specific about what is required.
Sidharth Panwar
As a suggestion for the dimming thing, is it possible for you to create a modal dialog and populate it with the row data? That would be cleaner and more "do-able".
Sidharth Panwar
im beginning to think that it is the only way.
Russ Bradberry
Also, try putting a hidden div over the table, populate it with the row and tweak its z-index so that it stays on top of the table.
Sidharth Panwar
A: 

i don't think you'll be able to accomplish your desired effect with z-index. using overlay divs to mask everything around the table row seems like a more workable approach.

lincolnk
+1  A: 

I can only think of more complicated solutions like these:

  1. You'll need 3 transparent gray divs instead of 1. Use the first to gray out the whole page. Set the z-index of the whole table to bring it above that div. Use the 2nd div to gray out everything above your row, and the third to gray out everything below your row, leaving just your row un-grayed.
  2. Gray out the whole page. Create a duplicate table with a single row that you hover above the original table. When you edit this new table, sync those values with the underlying table.
Dave Aaron Smith