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

Question

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

现在，我想要获得的是，当语言按钮打开时单元格中的单词被 HTML 输入替换，当语言按钮关闭时恢复原状。

我想我可以通过 td:nth-child(columnNumber) 的行循环并保存数组中的所有单词。首次单击按钮时，该函数会检查单元格是否有输入 - 如果没有，则添加输入，如果有，则将数组恢复到单元格中。

我的问题是，createFirstArr(); 函数没有填充数组，据我所知，问题出在 td:nth-child - 在点击功能之外是看不到的。

你知道我如何从 访问 td:nth-child document.read()函数?

因为如果我通过单击调用数组创建函数，它将始终用 <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);
        });
    });
}

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

提前感谢您的宝贵时间！

Answer 1

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

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

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

jQuery: td:nth-child can't be called from document.ready

javascript

jquery

csvtotable