html - Insert image into table cell in Javascript

Question

Welcome To Ask or Share your Answers For Others

html - Insert image into table cell in Javascript

posted Oct 24, 2021 in Technique[技术] by 深蓝 (71.8m points)

html - Insert image into table cell in Javascript

I want to insert images to the new cell just created. How can I do it? Can anyone guide me in doing it? Here's my code to 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>

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

1 Reply

深蓝 · Answer 1 · 2021-10-23T21:42:49+0000

You can create the image element and append it to the new cell:

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);
}

Beware of building the raw HTML for the image, if you do it that way you'll need to make sure that you escape the src and any other attributes.

Categories

html - Insert image into table cell in Javascript

html - Insert image into table cell in Javascript

Please log in or register to add a comment.

Please log in or register to reply this article.

1 Reply

Please log in or register to add a comment.

Just Browsing Browsing

Most popular tags