jQuery: td:nth-child не может быть вызван из document.ready

Question

Я работаю над небольшим языковым учебным проектом:
Я импортирую из файла.csv таблицу немецких слов и их английский перевод, используя плагин jQuery.csvToTable.

Теперь я хочу, чтобы слова в ячейках были заменены вводом HTML, когда языковая кнопка была включена, и восстановлена ​​обратно, когда она выключена.

Я думал, что смогу сделать это, используя цикл по строкам td:nth-child(columnNumber) и сохраняя все слова в массиве. Когда кнопка нажимается в первый раз, функция проверяет, есть ли у ячеек входные данные - если нет, то добавляется, а если да, массив восстанавливается в ячейках.

Моя проблема в том, что createFirstArr(); Функция не заполняет массив, и из того, что я заметил, проблема в td:nth-child - она ​​не видна за пределами функции click.

У вас есть идея, как я могу получить доступ к 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);
        });
    });
}

Моя конечная цель - чтобы пользователь проверил свои знания, заполнив пустые места, а затем проверил со словом, которое было в ячейке, был ли он прав или нет.

Спасибо заранее за ваше время!

Answer 1

CSVToTable использует AJAX для загрузки файла CSV, поэтому это делается асинхронно. Вы пытаетесь получить доступ к таблице до ее загрузки. CSVToTable вызывает loadComplete событие, когда он заканчивает загрузку таблицы, вам нужно запустить свою функцию в этом обработчике событий.

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