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

时间:2015-10-25 07:54:07

标签: javascript html css

我创造了像candycrush这样的游戏,其中只有三个糖果出现。过了一段时间,又有三个糖果出现在同一排。我正在使用图像作为糖果,我只是想将它们添加到同一行的下三个单元格中,直到该行充满了9个糖果。以下是我的代码:

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++;
            }

        }


    }

}

有一系列图像。它只需随机拍摄一张图像并将其附加到该特定单元格中。但问题是图像没有附加在单元格中。 c和ro是全局变量,每个变量都初始化为0。 以下是table creation.creation的代码。我动态创建它

       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();}

因此,只需在上面的代码中,插入三个图像后,它会等待一段时间,然后它应该将图像附加到下三个单元格中。但它甚至没有显示单个图像。

1 个答案:

答案 0 :(得分:1)

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

在我看来,将表附加到数组的最简单方法是通过设置innerHTML或appendChild来附加图像。

&#13;
&#13;
 //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);
&#13;
<table border=solid>
	<tbody id="candyTable" >
		
        
	</tbody>

</table>
&#13;
&#13;
&#13;

上面将从糖果阵列中随机选择一个糖果并将其插入所选的编号为[0-8] [0-8]的单元格作为[row] [column]。我确定你已经有了loginc来选择要插入的列和行,因为你特意询问插入图像!希望这是你想要的。