如何在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表格中插入几个相同的图像？

回答

相关问题