如何在表格单元格中的图像上放置图像

Question

我正在尝试将图像放在表格单元格中的图像之上（如果您单击它）。

<table>
  <tr>
    <td style="background-color:Gray;"><a id="firstcell" onclick="addImage"><img scr="snowman.png"></a></td>
  </tr>
...
</table>

这是 addImage function：

function showMoves(fig_name,pos) {
        var image = document.createElement("img");
        var imageParent = document.getElementById("firstcell");

        image.src = "circle.png";
        image.style.position = "absolute";

        imageParent.appendChild(image);
    }

我用 absolute position 试过了，但它在表格单元格的右侧，而不是直接在顶部。
我单击了 Lightgray 单元格并将其放在灰色单元格上。

重要的是添加带有 function 的圆圈，当您单击雪人时执行该圆圈并且圆圈必须在上方。 或者是否有不同的方法来标记表格中的单元格？

Answer 1

将 class 分配给图像然后根据以下代码设置 class 的样式要容易得多：

 window.onload = () => { document.getElementById('firstcell').addEventListener('click',addImage); //I've moved this from the 'onclick' attribute in your html to the window.onload event. It's better practice. } function addImage() { var image = document.createElement("img"); var imageParent = document.getElementById("firstcell"); image.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkCAAAAABVicqIAAAALHRFWHRDcmVhdGlvbiBUaW1lAFdlZCAyNSBKYW4gMjAyMyAxNzozMTozNyAtMDAwMLY8BBsAAAAHdElNRQfnARkRICUUgImdAAAACXBIWXMAAAsSAAALEgHS3X78AAAABGdBTUEAALGPC/xhBQAAAAJ0Uk5TAP9bkSK1AAAB3ElEQVR42u2a0Q7DIAhFhf//5y5L1lUUFZTrtmY8LJmKx0trq1I6ksfo+eNzeXqZPUj+9ZBsENKLraAxhPrVFtAIogWpxI7H2WtB/X4G1SaIoQ8jpgmx+luatSBkioMEtQUfU26+IakQjwzLqDSInzFwqiHeUBkoFWRKxsCzhMwz3s61bwFpNVujsNJ0mvHyrB6pEjL3ThpSBGSZ0aDkELL3NaJ0lKwLSeorJ4MEBKtBuSAhwdKDwYP6acvHzKIwiFF2w73KKClcF8VL4XbVKuUaN8sKjL0gsdEqpfBCR04l4UI0yCkw2M6xw8KVj5m1wmjjXBZKCtdFgUYSArVtEPAsgSshNOS6l2514Slh5/vNwvWHuCBy+fLLSn4aoq4gEXa8IdhnCl7JByCYiXJkEMhFUXZa0DkPuybq7hch5bwMLP6BbOctHC5FrE7KAxykkmiKXGZh9iedk7vYgCk7LT3HEyOkvIUxJ2uIfXzvXDgqYPXxHKtNYhnx513aIOvjwTUpakpAhmuZoqcduNkyjvGRJM2edNOexNmsGF8KcIriT2buScs6xUwmmFM+WXCpcpv/atJf9lH106lyQpLtEbP2IYYFE/FJSRcU93FMAxT/mc+i3W/3+4d8D+QBTk2Hi2UsNw8AAAAASUVORK5CYII="; //this is just a png of a circle encoded in to base 64 so it'll work on this site image.className = "overlay"; //rather than using inline styles, just set the classname to overlay and then you can use as much css as you like to get the effect you want. imageParent.appendChild(image); }

 img { display: block; /* remove that annoying space at the bottom of inline items */ } td { position: relative; /* this creates a new containing block so we can position the overlay image relative to the table cell */ }.overlay { position: absolute; left: 3px; /* 3px from the left of the table cell and... */ top:5px; /* 5px from the left of the table cell and... */ }

 <table> <tr> <td style="background-color:Gray;"><a id="firstcell"><img src="https://picsum.photos/id/64/100/100"></a></td> </tr> </table>