JavaScript – Display Selected HTML Table Image Into DIV complete code solution

JavaScript – Display Selected HTML Table Image Into DIV

In This Javascript Tutorial we will See How To Display Image From The Selected HTML Table Row Into a DIV Using The “Background Image”, Or Into an IMG Using “src”, On Row Click Event Using JS And Netbeans Editor .

Project Source Code:

<!DOCTYPE html>


<html>
    <head>
        <title>Display Image From HTML Table Selected row</title>
        <meta charset=”UTF-8″>
        <meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
   
         <style>
             
             table tr:not(:first-child){ cursor: pointer; transition: all .25s ease-in-out; }
             
             table tr:not(:first-child):hover{ background-color: #000; color: #fff; }
             
             img{ width:120px; height: 75px; }
             
             div{width:120px; height: 75px; border:1px solid red; 
                 background-size:contain; background-repeat: no-repeat}
             
        </style>
        
    </head>
    <body>
       
        ID:<input type=”text” name=”age” id=”imgId”><br><br>
        Image:<!–<img src=”https://1bestcsharp.blogspot.com/2020/05/images/img0.png” alt=”default image” id=”pic”>–>
        <div id=”divpic”></div>
        
        <table id=”table” border=”1″>
            <tr>
                <th>ID</th>
                <th>IMAGE</th>
            </tr>
            
            <tr>
                <td>1</td>
                <td><img src=”https://1bestcsharp.blogspot.com/2020/05/images/img1.png” alt=”image 1″></td>
            </tr>
            
            <tr>
                <td>2</td>
                <td><img src=”https://1bestcsharp.blogspot.com/2020/05/images/img2.png” alt=”image 2″></td>
            </tr>
            
            <tr>
                <td>3</td>
                <td><img src=”https://1bestcsharp.blogspot.com/2020/05/images/img3.png” alt=”image 3″></td>
            </tr>
            
            <tr>
                <td>4</td>
                <td><img src=”https://1bestcsharp.blogspot.com/2020/05/images/img4.png” alt=”image 4″></td>
            </tr>
            
            <tr>
                <td>5</td>
                <td><img src=”https://1bestcsharp.blogspot.com/2020/05/images/img5.png” alt=”image 5″></td>
            </tr>
        </table>
        
        <script>
            
            var table = document.getElementById(‘table’);
            
            for(var i = 1; i < table.rows.length; i++)
            {
                table.rows[i].onclick = function(){
                    
                    document.getElementById(‘imgId’).value = this.cells[0].innerHTML;
                    // for img
                    //document.getElementById(‘pic’).setAttribute(‘src’,this.cells[1].childNodes[0].src);
                    // for div
                    document.getElementById(‘divpic’).style.backgroundImage = “url(“+this.cells[1].childNodes[0].src+”)”;
                };
            }
            
        </script>
        
    </body>
</html>


OUTPUT:

Display Selected HTML Table Image Into IMG Using JS


freshersonline

Also read : Starlink should be fully mobile by the end of 2021
Also read : Can I invest in Cryptocurrency?

freshersonline

JavaScript – Display Selected HTML Table Image Into DIV
#JavaScript #Display #Selected #HTML #Table #Image #DIV

Leave a Comment