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

时间:2013-06-07 07:13:28

标签: javascript html image html-table cell

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

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

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

3 个答案:

答案 0 :(得分:19)

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

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

答案 1 :(得分:6)

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

答案 2 :(得分:0)

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

可能会有所帮助,动态主义可以在以后实现,只要尝试它现在有效吗?