Question

我被赋予了使用javascript渲染切片图像的任务。

我的老师为我提供了切片图像的文件夹。我被要求将每张图片分别放入表格<td>。每行有4行和5列（20个切片图像）。我现在需要使用javascript来渲染图像，创建整个图像，切片之间没有空格或间隙。

我的老师给了我一个线索，我需要使用嵌套的for循环来将切片渲染在一起，并且渲染应该通过单个语句来实现。

我理解嵌套for循环，但我似乎无法完成这个任务。有人可以告诉我如何使用单个嵌套的for循环语句在表格中渲染切片图像，不留任何间隙或空格？

//JavaScript

var numRows = 4;
var numCols = 5;

var redBowl = document.getElementsByClassName('orderImage');
  var orderImage = '';

for (var i = 0; i < numRows; i++) {
    orderImage += '<tr>';
        for(var j = 0; j < numCols; j++) {
            orderImage += '<td>' + i + j + '</td>'; 
    }
orderImage += '</tr>';
}

redBowl.innerHTML = orderImage;

//HTML 

<table class="orderImage">

<tr>

<td><img src="images/bcpot002_r1_c1.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>

<td><img src="images/bcpot002_r1_c2.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r1_c3.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r1_c4.jpg" width="130" height="80" 
    alt="Red bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r1_c5.jpg" width="130" height="80" 
    alt="Red bowl" title="Red Bowl"/></td>

</tr>

<tr> 

<td><img src="images/bcpot002_r2_c1.jpg" width="130" height="80" 
    alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r2_c2.jpg" width="130" height="80 
    alt="Red 
     Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r2_c3.jpg" width="130" height="80" 
    alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r2_c4.jpg" width="130" height="80" 
    alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r2_c5.jpg" width="130" height="80" 
    alt="Red Bowl" title="Red Bowl"/></td>

</tr> 


<tr> 

<td><img src="images/bcpot002_r3_c1.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r3_c2.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r3_c3.jpg" width="130" height="80 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r3_c4.jpg" width="130" height="80 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r3_c5.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>

</tr>

<tr>

<td><img src="images/bcpot002_r4_c1.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r4_c2.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r4_c3.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r4_c4.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>
<td><img src="images/bcpot002_r4_c5.jpg" width="130" height="80" 
     alt="Red Bowl" title="Red Bowl"/></td>

</tr>

</table>

Answer 1

我做了一个简单的嵌套循环示例。这个帮助是否足够，或者你尝试了什么，你被困在哪里？

var ele = document.getElementById('table');
var table = '';

for(var i = 0 ; i < 4 ; i++) {
	table += '<tr>';
  for(var j = 0 ; j < 5 ; j++) {
  	table += '<td>' + i + j + '</td>';
  }
  table += '</tr>';
}
ele.innerHTML = table;

td {
  border: 1px solid lightgray;
}

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

使用Javascript

1 个答案: