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

Question

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

9

我想在新创建的单元格中插入图片。我该怎么做？有人可以指导我吗？这是我的插入单元格代码：

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

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

- user2462483

你可以使用 innerHTML 将一些文本放入你的 td 中，但是你不能放置一个 img 标签吗？ - Teemu

@Teemu 是的..完全正确.. - user2462483

我不太明白，如果你写成"<img src='myImageURL' />"而不是"New cell"有什么区别？ - Teemu

3个回答

8

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

- p e p

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

-1

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

也许这可以帮助，动态性稍后可以实现，现在先试试看是否有效？

- user2412575

这将显示图像文件的名称。它不会将实际图像放出来。 - LaurelS

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

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