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

Question

我想将图像插入到刚刚创建的新单元格中。我该怎么做？任何人都可以指导我这样做吗？这是我插入单元格的代码：

  <!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>

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

score 22 · Accepted Answer

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

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和任何其他属性。

score 8 · Accepted Answer

只需将新单元格的内部 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'/>";
}

score -1 · Accepted Answer

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

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

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

3 回答 3

Related

Reference