Как изменить изображения в цикле for для каждой итерации

Question

Я хочу написать вызов AJAX, разобрать XML в объект Javascript, а затем отобразить объект Javascript.Мне нужно создать таблицу.Первый столбец покажет список видео, а второй столбец покажет детали конкретного видео.Все хорошо, кроме одной вещи.Я не могу изменить видеоизображения и ссылки для каждой строки.Я пробовал разные способы, но повторяется только первая ссылка и изображение.

Я знаю, что есть проблемы с логикой, но я не нашел правильный способ сделать это.

function display(resultObj){
 var html = "<table border='0'>";
 html += "<tr><th></th></tr>"+"<br>";
 for(var i=0; i<resultObj.itemArray.length; i++){
   var video = resultObj.itemArray[i];
   html += "<tr>";
   html +="<td>" + "<a href='https://www.youtube.com/watch?v=kbKtFN71Lfs' 
   target='_blank'>" + 
   "<img src='https://i.ytimg.com/vi/kbKtFN71Lfs/maxresdefault.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=SjIHB8WzJek' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/SjIHB8WzJek/0.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=YCXmUi56rao' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/YCXmUi56rao/0.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=aQxCnmhqZko' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/aQxCnmhqZko/0.jpg' 
   style='width:200px;height:200px;'>" +
   "<a href='http://www.youtube.com/watch?v=jPcBU0Z2Hj8' target='_blank'>" + 
   "<img src='http://i.ytimg.com/vi/jPcBU0Z2Hj8/0.jpg' 
   style='width:200px;height:200px;'></td>" +;

   html += "<td><br>" + "<p style='color:red;font-family:courier;font- 
   size:25px;'>"      + video.title        +
   "</p>"             + video.channel      + 
   "<br>"             + video.view         + 
   " views"           + "<br><mark>"       +
   video.length       + "</mark>";

   html += "</tr>";
 }
   html += "</table>";
   html += "</table>";
   var resultDiv = document.getElementById("Sresult");
   resultDiv.innerHTML = html;
  }

Answer 1

Я решил свою проблему с помощью переключателя состояния: теперь он работает отлично.

for(var i=0; i<resultObj.itemArray.length; i++){
   var video = resultObj.itemArray[i];
   html += "<tr>";
   switch(i){
   case 0:
       html += "<td>" +
       "<a href='https://www.youtube.com/watch?v=kbKtFN71Lfs' target='_blank'>" + 
       "<img src='https://i.ytimg.com/vi/kbKtFN71Lfs/maxresdefault.jpg' 
       style='width:200px;height:200px;'></td>";
       break;
   case 1:
       html +=  "<td>" +
       "<a href='http://www.youtube.com/watch?v=SjIHB8WzJek' target='_blank'>" + 
       "<img src='http://i.ytimg.com/vi/SjIHB8WzJek/0.jpg' 
       style='width:200px;height:200px;'></td>";
       break;
   case 2:
       html += "<td>" +
       "<a href='http://www.youtube.com/watch?v=YCXmUi56rao' target='_blank'>" + 
       "<img src='http://i.ytimg.com/vi/YCXmUi56rao/0.jpg' 
       style='width:200px;height:200px;'></td>";
       break;
   case 3:
       html += "<td>" +
       "<a href='http://www.youtube.com/watch?v=aQxCnmhqZko' target='_blank'>" + 
       "<img src='http://i.ytimg.com/vi/aQxCnmhqZko/0.jpg' 
       style='width:200px;height:200px;'></td>"
       break;

   case 4:
       html += "<td>" +
       "<a href='http://www.youtube.com/watch?v=jPcBU0Z2Hj8' target='_blank'>" + 
       "<img src='http://i.ytimg.com/vi/jPcBU0Z2Hj8/0.jpg' 
       style='width:200px;height:200px;'></td>";
       break;

   }