如何在html表格中插入幾個相同的圖像？

我正在製作記憶卡遊戲，並且需要在桌上。所以開始時，我需要幾張相同的圖像（紙牌背面）。我有圖像已經插入它加載，因爲它應該，這裏是迄今爲止代碼：如何在html表格中插入幾個相同的圖像？

<table border="1" style="width:100%"> 
<tr> 
    <td> 
     <a href="default.asp"> 
     <img src="back.gif" alt="Please re-load" style="width:200px;height:249px;border:0;"> 
     </a> 
    </td> 
</tr>

它也要求，而不是硬編碼它，我用一個for循環調用圖像數次。我知道這可能很容易做，但我是初學者，現在已經嘗試了幾個小時。

來源

2016-05-13 Robo

那你試試？請向我們展示一些代碼...我們無法猜測您的問題在哪裏。 – roNn23

你的意思是使用javascript？ jQuery允許嗎？或者你的意思是使用haml進行for循環？ –

你想使用Jquery，Angular還是plain JS嗎？ – PeterS

以下是如何在for循環中使用普通javascript創建元素。 HTML方面，你只需要一個空表來追加元素。

var width = 4; 
 
var height = 4; 
 

 
for (var i = 0; i < height; i++) { 
 
    
 
    var tr = document.createElement("tr"); 
 
    
 
    for (var j = 0; j < width; j++) { 
 

 
    var td = document.createElement("td"); 
 
    var a = document.createElement("a"); 
 
    a.setAttribute("href", "#"); 
 
    var img = document.createElement("img"); 
 
    img.setAttribute("src", "http://www.bgdf.com/sites/default/files/images/AAAADEnelREAAAAAAM6-JASMALL.preview.jpg"); 
 

 
    a.appendChild(img); 
 
    td.appendChild(a); 
 
    tr.appendChild(td); 
 
    } 
 
    document.getElementById("memoryGame").appendChild(tr); 
 
}

#memoryGame img { 
 
    width: 75px; 
 
    height: 100px; 
 
}

<table id="memoryGame"> 
 
</table>

來源

2016-05-13 11:39:19 PinkTurtle

非常完美！非常感謝你。 – Robo

您需要將id="box"添加到您想要存儲圖像的角色中。

document.getElementById('box').innerHTML += '<img src="back.gif" alt="Please re-load" style="width:200px;height:249px;border:0;">';

來源

2016-05-13 09:13:27 RaV

我會這樣做。

https://jsfiddle.net/h6uwpjt1/

for (var i = 0; i < 10; i++) { 
     $('#table1 tr').append('<td><a href="default.asp"><img src="back.gif" alt="Please re-load" style="width:200px;height:249px;border:0;"></a></td>') 
    }

當然這取決於你想在每行中有多少IMGS，但你可以改變的代碼。假設您只需要每行3個圖片，那麼只需說

if((i % 3) == 0) 
{ 
    //Append a </tr> to close the existing tr. 
    //Append a new <tr> to begin the new row. 
}

來源

2016-05-13 09:15:44

如何在html表格中插入幾個相同的圖像？

回答

相關問題