I have a table with several rows and cells. They are dynamically generated so each time the number of rows can be different.

I want a hidden div, which after the user presses to a link contained in one of the cells, the div will become visible and will be positioned next to the link pressed or next to the cell which contains the link.

The page is all created with Javascript and there is no HTML at all. Here is a small example of what i am trying to do. the thing is that i haven't done this before so i am just experimenting with the below to see what happens. However i need this urgently.

var refDiv = document.createElement("div");
refDiv.setAttribute("id", "refDiv" + x);
refDiv.innerHTML = data[x].refs;
refDiv.className = "refDivs";
refDiv.style.position = "absolute";
refDiv.style.visibility = "hidden";
refDiv.style.top = ?;
refDiv.style.left = ?;
refDiv.style.zIndex = 2;

cell or row.appendChild(refDiv);

Does anyone know what is the best way to achieve this?

Thanks in advance