Is there a way to implement a hover effect on a dynamically created table to display a small edit button in the top right corner of each cell? The goal is to have this button trigger a popup window when clicked. Something similar to the image below:
https://i.sstatic.net/bF47L.png
The desired functionality includes presenting options over the div when hovered over. Would achieving this require using javascript, css, or both? Currently, the table creation process involves the following JavaScript code:
var col = document.getElementById("NoColumns").value;
var row = document.getElementById("NoRows").value;
if (col > 0 || row > 0) {
$("#tblDash").show();
$("#NumberOfColumns").val(col);
$("#NumberOfRows").val(row);
for (var x = 1; x <= row; x++)
{
tr = document.createElement('tr');
document.getElementById('table').appendChild(tr);
for (var i = 1; i <= col; i++) {
var td = document.createElement('td');
td.className = "drop";
td.id = x + ', ' + i;
td.setAttribute('onclick', 'clicked(this);')
td.appendChild(document.createTextNode(i));
tr.appendChild(td);
}
}