如何在特定列的特定行中添加图像或值

Question

Im creating this game like candycrush in which at a time only three candies appear. After sometime three more candies appear in the same row. Im using images for candies and I simply want to append them in next three cells in same row until that row is filled with 9 candies.Following is my code:

function main(){
    var array=new Array("i.jpg","ic.jpg","w.png","milk.png","o1.png","d.jpg","c.png","d.png","corn.png","p.jpg");
for(;ro<9;ro++){

        for(;c<9;){
            var cell= document.getElementById["t"].rows[ro].cells[c];
            var r= Math.floor(Math.random()*10);
            img.src = array[r];

            img.style.height="45px";
            img.style.width="35px";
            cell.append(img); 
            if(c==3)
            setInterval(function fun(){c++;}, 1000);
            else{

                c++;
            }

        }


    }

}

There is an array of images. It simply takes one image randomly and appends it in that specific cell. But the problem here is that image is not appended in the cell. c and ro are global variables each initialized to 0. And following is the code for table creation.creation. Im creating it dynamically

       function createtable(){
           var table=document.getElementById("t");
           for(var i=0; i<9; i++)
    {

        var row=table.insertRow(i);


        for(var j=0; j<9;j++){
                var x=row.insertCell(j);





}
main();}

So, simply in above code, after three images are inserted it waits for a certain time and then it should append the image in next three cells. But it is not even displaying a single image.

Answer 1

https://jsfiddle.net/pcconsolidated/rsex31ob/

In my opinion the easiest way to attach the table to an array then append the image by either setting innerHTML or appendChild.

  //var imageArray=["i.jpg","ic.jpg","w.png","milk.png","o1.png","d.jpg","c.png","d.png","corn.png","p.jpg"]; var tableObj=[]; var candyTable=document.getElementById("candyTable"); var imageArray=["http://www.dezineguide.com/wp-content/uploads/2012/10/Create-a-Piece-of-Vector-Candy-in-Adobe-Illustrator.jpg","http://thumbs.dreamstime.com/z/hard-candy-cough-drop-white-background-24033664.jpg","data:image/jpeg;base64,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"]; for(i=0; i<9; i++){ candyTable.innerHTML+="<tr id='row"+i+"'></tr>"; for(j=0;j<9;j++){ document.getElementById("row"+i).innerHTML+="<td style='width:80px;height:80px;' id='r"+i+"c"+j+"' ></td>"; } } for(i=0; i<9; i++){ tableObj[i]=[]; for(j=0;j<9;j++){ tableObj[i][j]=document.getElementById("r"+i+"c"+j); } } function getCandy(){ return imageArray[Math.floor(Math.random()*imageArray.length)]; } function addCandy(targetRow, targetCol){ tableObj[targetRow][targetCol].innerHTML="<img src='"+getCandy()+"' style='width:65px;height:65px;'>"; } addCandy(3,3); addCandy(3,4); addCandy(3,5); 

 <table border=solid> <tbody id="candyTable" > </tbody> </table> 

Above will randomly choose a candy from the candy array and insert it in the chosen cell numbered [0-8][0-8] as [row][column]. Im sure you already have the loginc to choose the column and rows to insert into on hand as you specifically asked about inserting the images! Hope this is what you were looking for.