在 Javascript 中将图像插入表格单元格

Insert image into table cell in Javascript

本文关键字：插入 表格 单元格 图像 Javascript      更新时间：2023-09-26

我想将图像插入到刚刚创建的新单元格中。我该怎么做？谁能指导我这样做？这是我插入单元格的代码：

  <!DOCTYPE html>
    <html>
    <head>
    <script>
    function displayResult()
    {
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="New cell"
    }
    </script>
    </head>
    <body>
    
    <table id="myTable" border="1">
      <tr>
        <td>First cell</td>
        <td>Second cell</td>
        <td>Third cell</td>
      </tr>
    </table>
    <br>
    <button type="button" onclick="displayResult()">Insert cell</button>
    
    </body>
    </html>

我想要的只是在创建的单元格中插入图像。

您可以创建图像元素并将其附加到新单元格：

function displayResult()
{
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="New cell";
    var img = document.createElement('img');
    img.src = "link to image here";
    x.appendChild(img);
}

当心为图像构建原始 HTML，如果您这样做，则需要确保转义src和任何其他属性。

只需将新单元格的内部 HTML 设置为 img 元素的 HTML，即可使用您想要的任何 src 或属性。 

function displayResult()
{
    var firstRow=document.getElementById("myTable").rows[0];
    var x=firstRow.insertCell(-1);
    x.innerHTML="<img src='myImageURL' alt='hello'/>";
}

 function displayResult()
    {
   document.getElementById("myTable").rows[0].innerHTML="your image";
    }

也许这会有所帮助，以后可以实现动态主义，只是现在试试它是否有效？

相关文章：