0

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

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

我想我可以使用循环遍历td:nth-child（columnNumber）的行并将所有单词保存到数组中来做到这一点。当第一次单击按钮时，该函数会检查单元格是否有输入 - 如果没有，则添加它，如果有，则将数组恢复到单元格中。

我的问题是createFirstArr(); 函数不会填充数组，据我所知，问题出在td:nth-child中- 在 click 函数之外看不到它。

您知道如何从document.read()函数中访问td:nth-child吗？

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

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

在此先感谢您的时间！

4

1 回答 1

1

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

$('#firstTable').CSVToTable('woerterbuch.csv').on("loadComplete", createFirstArr);
于 2015-09-12T14:52:51.600 回答