将图像或css样式图标放置在单击的（网格）单元格内

Question

This is my code to create table with php by looping. I add an onclick function in each . So that on clicking a particular cell the background color is changed. Now i want to place a particular image..inside each cell that is being clicked..but am not able to figure out that function.

I want to write a function such that an image is placed when clicked.

/* 
 * javascript function that changes color of the cell.
 * 
*/

 <script>
    function changeColor(elem)
    {     
    elem.style.background = "red";     
    }
 </script>

Table created in php

<?php
    $rows = 10; // define number of rows
    $cols = 4;// define number of columns

    echo "<table border='1'>";

    for($tr=1;$tr<=$rows;$tr++){

        echo "<tr>";
            for($td=1;$td<=$cols;$td++){
                   echo "<td onclick=\"changeColor(this)\" > ".$tr." ".$td."</td>";
            }
        echo "</tr>";
    }

        echo "</table>";
?>

Answer 1

Use this:

elem.innerHTML = '<img src="path/to/image.png" />';