Автоматически перебирать теги td в таблице с jquery

Question

Я пытаюсь реализовать функцию таймера, которая будет прокручивать каждый тег td в таблице и сделать его «выбранным». Это произойдет автоматически. Его можно переопределить, щелкнув на конкретном теге td и выбрав его. Последовательность воспроизведения начнется. Кнопка остановки остановит последовательность.

Вот код javascript, который у меня есть, который составляет таблицу (идентификатор для каждого td составлен из уникального числа «идентификатор вида» и года с 1966 по 2012 год). Он находится в теге тела.

<script> 
    var year = 1966; 
    var speciesNum = document.getElementById("selectboxEnglish").value 
    document.write("<table id='yeartable' border='0'>"); 

    for (var r=0; r<5; r++) 
    { 
     document.write("<tr>"); 
     for (var d=0; d<=9; d++) 
     { 
      document.write("<td id="+speciesNum+"_"+year+">" + year + "</td>"); 
      year+=1; 
      if (year == 2013){break}; 
     } 
     document.write("</tr>"); 
    } 
    document.write("</table>"); 
</script> 

Вот текущая функция JQuery У меня есть, что использует событие курсора, находящегося, чтобы выбрать конкретный TD тег (это в голову тег:.

 $(document).ready(function() { 
     $("td").addClass("unselected"); 

     $("td").mouseover(function() { 
      $("td").removeClass("unselected"); 
      $("td").addClass("unselected"); 
      $(this).removeClass("unselected"); 
      $(this).addClass("selected"); 
      var fileName = getFileName($(this).attr("id")); 
      $("#imgYear").attr("src", fileName); 
      $("#imgYear").attr("alt", fileName); 
     }); 
    }); 

Пожалуйста, помогите

Answer 1

See this basic implementation, хотя Я не использую класс .unselected, так как я не понимаю, зачем он нужен (см. Мой комментарий к вашему вопросу). Решение выглядит следующим образом (с дополнительным комментарием) (Редактировать - добавлена ​​остановка и r функциональность ESET, Edit # 2 - только один элемент .selected одновременно):.

JavaScript

// Establish a default queue (in your case, all your tds) 
var originalQueue = queue = $("td"), 
    selectionTimeout; 

// Recursive function to highlight all elements 
function highlight_all(elems) { 
    // Remove selected class on all queue elements 
    originalQueue.removeClass("selected"); 
    // Shift first element from list, and re-add selected class to it 
    var next = elems.eq(0).addClass("selected"); 
    // Remove it from the queue 
    queue = elems.slice(1); 
    // If any more elements, set a timeout to repeat in 100ms 
    if (queue.length) { 
     selectionTimeout = setTimeout(function() { 
      highlight_all(queue) 
     }, 100); 
    } 
} 

// Start the selections based on current queue 
$("#start").on("click", function() { 
    highlight_all(queue); 
}); 

// Clear the timeouts, stopping any more being selected 
$("#stop").on("click", function() { 
    clearTimeout(selectionTimeout); 
}); 

// Clear the timeout, reset the queue to it's default state 
// and remove selected classes 
$("#reset").on("click", function() { 
    clearTimeout(selectionTimeout); 
    originalQueue.removeClass("selected"); 
    queue = originalQueue; 
});