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

Question

I'm working on a small language training project:
I import from a .csv file a table of German words and their English translation using the jQuery.csvToTable plugin.

Now, what i want to obtain, is for the words in the cells to be replaced by an HTML input when the language button is toggled on and restored back when it's toggled off.

I thought i could do this using a loop through the rows of td:nth-child ( columnNumber ) and saving all the words to an array. When the button is first clicked the function checks if the cells have an input - if they don't, it's added, while if they do, the array is restored into the cells.

My problem is, the createFirstArr(); function does not fill the array and from what i've noticed the problem is in the td:nth-child - it's not seen outside the click function.

Do you have an idea how could i access the td:nth-child from within the document.read() function?

Because if i call the array creating function with a click it will always fill it with <input> -s since it takes the actual cell content.

$(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);
        });
    });
}

My final objective is for the user to check his knowledge by filling the empty spaces and then checking with the word that was in the cell whether he was right or not.

Thanks in advance for your time!

Answer 1

CSVToTable uses AJAX to load the CSV file, so this is done asynchronously. You're trying to access the table before it has loaded. CSVToTable triggers the loadComplete event when it finishes loading the table, you need to run your function in this event handler.

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