openchallenge9.html

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>10x10</title>
  <style>
    table {
        border : 1px solid blue;
        border-collapse : collapse;
    }
    td {
        border : 1px solid blue;
        width : 50px;
        height : 50px;
        padding : 0px;
    }
    </style>
    <script>
    var select=0; 
    var img = new Image();
    img.src="pp.png"; 
    function set() {
    var table = document.getElementById("demo");
 
    // 10X10 CELL START
    for( var i = 0; i < 10; i++ ){
        var row = document.createElement("tr");
        for( var j = 0; j < 10; j++ ){
            var col = document.createElement("td");
            col.innerHTML = "<img src=''>"
            row.appendChild(col);
        }
        table.appendChild(row);
    }
    // 10X10 CELL END
 
        for(var i=0;i<100;i++) { 
            document.images[i].onclick=moveImage;
            document.images[i].style.visibility = "hidden"; 
        }
        moveImage(); 
    }
    
    // <img> 태그의 click 리스너
    function moveImage() { 
        document.images[select].src=""; 
        document.images[select].style.visibility = "hidden";
        select = Math.floor(Math.random()*100); 
        document.images[select].src=img.src;
        document.images[select].style.visibility = "visible"; 
    }
    </script>
</head>
<body onload="set()">
  <table id="demo"></table>
</body>
</html>
 