javascript - 在单击的(网格的)单元格内放置图像或 css 样式图标

Question

这是我通过循环使用 php 创建表的代码。我在每个 .因此，在单击特定单元格时，背景颜色会发生变化。现在我想放置一个特定的图像..在每个被点击的单元格内..但我无法弄清楚该功能。

我想编写一个函数，以便在单击时放置图像。

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

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

在 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

替换

  elem.style.background = "red";     

将此用于 javascript

  elem.style.backgroundImage ="url('path/myimage.jpg')";

将其用于 jQuery

  $(elem).css('background-image', "url('path/myimage.jpg')");

FOR DRAWING A CIRCLE TRY THIS (ADD THIS POINT TO THE ORIGINAL QUESTION AS WELL)

您可能想看看 HTML5 CANVAS

您必须在 td 中添加一个 canvas 标签并将它的引用发送给该函数

    var offsets = elem.getBoundingClientRect();
    var top_C = offsets.top;
    var left_C = offsets.left;
    var bottom_C= offsets.bottom;
    var right_C= offsets.right;
    var y_C= ((bottom_C-top_C)/2); // Y- Co=ordinates
    var x_C=((right_C-left_C)/2);  // X- Co=ordinates
    var ctx=elem.getContext("2d");
    ctx.beginPath();
    ctx.arc(x_C,y_C,40,0,2*Math.PI);
    ctx.stroke();

您可能需要尝试几次才能获得适合您的小区的完美半径。 ctx.arc()

中的第三个参数