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

【问题标题】：Insert image into table cell in Javascript在Javascript中将图像插入表格单元格
【发布时间】：2013-06-03 10:01:57
【问题描述】：

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

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

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

【问题讨论】：

您可以使用innerHTML 在td 中添加一些文本，但您不能在其中添加img 标记？
@Teemu 是的.. 完全正确..
我不太明白，写"<img src='myImageURL' />"而不是"New cell"有什么区别？

标签： javascript html image html-table cell

【解决方案1】：

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

这可能有帮助，以后可以实现动态，如果现在可以试试？

【讨论】：

这将显示图像文件的名称。它不会将实际图像放在那里。

【解决方案2】：

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

【讨论】：

嘿，这对我有用！我也喜欢最少的行数。

【解决方案3】：

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

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 属性有用：accessify.com/tools-and-wizards/developer-tools/quick-escape/…