Maybe what I am trying to acplish 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 pletely.

Maybe what I am trying to acplish 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 pletely.

• javascript
• jquery
• modal-dialog

• I don't have the answer - but have you tried setting the index of all cells inside the row, instead of the row? – xcut Commented Sep 7, 2010 at 18:49

4 Answers 4

I can only think of more plicated 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.

I've successfully done this just now using

div.milk { position:absolute; z-index:2; width:100%; height:100%; opacity:.5; }
tr.raised { position:relative; z-index:3; }

so, in short, position:relative seems to work ?

I must admit, I came here because I still have some weird issues. but overall it seems to work ?

*-pike

If you're using jQuery, try this:

$("<get the tr>").css("z-index", <value>);

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