jQuery：td：nth-​​child无法从document.ready调用

Question

我正在进行一项小型语言培训项目：
我使用jQuery.csvToTable插件从.csv文件导入德语单词表及其英语翻译。

现在，我想要获得的是，当切换语言按钮时，单元格中的单词将被HTML输入替换，并在切换时将其恢复。

我想我可以通过循环遍历 td：nth-​​child （ columnNumber ）的行并将所有单词保存到数组中。当首次点击该按钮时，该功能会检查单元格是否有输入 - 如果它们没有输入，则添加它，如果有，则将数组恢复到单元格中。

我的问题是， createFirstArr（）; 函数没有填充数组，而且我已经注意到问题出在 td：nth-​​child - 它没有在点击功能之外看到。

您是否知道我如何从 document.read（）函数中访问 td：nth-​​child ？< / p>

因为如果我通过点击调用数组创建函数，它将始终用 <input> - s 填充它，因为它需要实际的单元格内容。

$(document).ready(function() {
    //importing from the CSV file
    $('#firstTable').CSVToTable('woerterbuch.csv');


    //the call for the array creating function
    createFirstArr();

    //toggle between the words and <input>
    $(".toggle").click(function() {
        var getID;
        var input = "<input>";
        if ($(this).attr('id') == 'lang1') {
            $(this).toggleClass("selected");
            getID = 1;
            if ($("td:nth-child(1)").html() != input) {
                cellToInput(input, getID);
            } else {
                inputToCell();
            }
        }
});

createFirstArr = function() {
    // I think the function should be global, not sure about how correct it is tho
    firstArr = [];

    // looping through the rows
    // the problem part, td:nth-child(1) is not seen
    $("td:nth-child(1)").each(function() {
        var id = $(this).html();
        firstArr.push(id);
    });

}

cellToInput = function(input, id) {
    $("td:nth-child(" + id + ")").each(function() {
        $(this).html(input);
    });
}

inputToCell = function(id) {
    $.each(firstArr, function(i, val) {
        $("td:nth-child(" + id + ")").each(function() {
            $(this).html(val);
        });
    });
}

我的最终目标是让用户通过填空空格来检查他的知识，然后检查单元格中的单词是否正确。

提前感谢您的时间！

Answer 1

CSVToTable使用AJAX加载CSV文件，因此这是异步完成的。您在加载表之前尝试访问该表。 CSVToTable在完成加载表时触发loadComplete事件，您需要在此事件处理程序中运行您的函数。

$('#firstTable').CSVToTable('woerterbuch.csv').on("loadComplete", createFirstArr);