Question

我正在尝试实现一个定时器函数，它将滚动表中的每个td标记并使其“选中”。这会自动发生。可以通过单击特定的td标记并“选择”该标记来覆盖它。播放按钮将启动序列。停止按钮将停止序列。

以下是我制作表格的javascript代码（每个td的id由一个独特的'species id'编号和一年，从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函数，它使用mouseover事件来选择特定的td标记（它位于head标记中：

        $(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课程，因为我不明白为什么你需要课程（请参阅我对你的问题的评论）。解决方案如下（附加评论）（编辑 - 添加停止和重置功能，编辑＃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;
});

使用jquery自动迭代表中的td标记

1 个答案: