Как использовать <tr></tr> над <br> для изображений

Question

Я новичок в javascript и пробую новые вещи. Можно ли хранить каждое из этих повторяющихся изображений в tr и иметь 5 отдельных строк? У меня в настоящее время есть тэг break каждый раз, когда место достигает 20 (19), но я предпочитаю иметь его в строке. Причина, по которой я хочу, чтобы она была в таблице, позволяет отображать число/текст под каждым изображением, чтобы пользователь знал, какой номер/текст назначается каждому изображению. Я бы очень признателен за чьи-то мнения.

Мой код в поле ниже

<script type="text/javascript"> 

var x= new Array(100); 
var myseat=""; 
var test=""; 
var noseats=0; 
var seatcounter=0; 

function seatgen() 
{ 

    for(i=0;i<100;i++) 
    { 
     myseat+="<img src='seat_avail.png' onclick='mycheck(this,"+i+")' width='45' height='70'>";   /*alt='seat"+i+"' id='mys"+i+"' onclick='mycheck("+i+")'*/ 

     if((i+1) % 20 == 0){ myseat+="<br>" } 

     x[i] = "available"; 
    } 

    document.getElementById("seathere").innerHTML=myseat; 
    noseats=prompt("How many seats would you like to book","10"); 

} 


function mycheck(k, p) 
{ 
    if(x[p] != "available"){ 
     alert("Not available"); 
    } else if(seatcounter == noseats) { 
     alert("Reacher max seats"); 
    } else { 
     k.src='seat_select.png'; 
     x[p]="unavailable"; 
     seatcounter+=1; 
    } 
} 

</script> 

Answer 1

Изменить что-то вроде:

function seatgen() 
{ 

myseat = "<table><tr>"; // open table and first row 

for(i=0;i<100;i++) 
{ 
    myseat+="<td><img src='seat_avail.png' onclick='mycheck(this,"+i+")' width='45' height='70'></td>";   

    if((i+1)%20==0){myseat+="</tr><tr>"} // close row, start new one 
    x[i]="available"; 
} 

myseat += "</tr></table>"; // close last row and table 

Это будет генерировать строки с 20 изображений каждого, каждый из которых в ячейке таблицы.

Edit: работа fiddle here

Answer 2

Каждая строка необходимости находиться в пределах блока.

myseat+="<table>"; 
for(i=0;i<100;i++) 
{ 
    myseat+="<img src='seat_avail.png' onclick='mycheck(this,"+i+")' width='45' height='70'>";   

    if((i+1)%20==0){myseat="<tr><td>"+myseat+"</tr></td>"} 
    x[i]="available"; 
} 

myseat+="</table>";