ajax - 无法将 sorttable.js 与动态创建的表一起使用。当我尝试调用 sorttable.makeSortable() 它说 table.tBodies 未定义

Question

我正在尝试将可排序的标头添加到在 ajax 请求中创建的动态表中。该表得到了很好的处理，并且可以毫无问题地附加到 HTML 页面。但是，每当我在 ajax 请求完成后尝试使表可排序时，它都会给我的 table.tBodies 抛出一个错误。我如何让 table.tBodies 出现？

制作表格的 Ajax 函数：

function starterFunction()
    {
        var table = createTable(0);
        table.setAttribute("id", "artistTable");

        var requestA = $.ajax({
            url: "https://spotify365.pythonanywhere.com/simpleData",
            type: "get",
            data: {'artist': "True"},
            success: function (response)
            {
                document.getElementById("indexDiv").hidden = false;
                // Disable the prev page button on first load
                document.getElementById("prev").disabled = true;
                document.getElementById("indexDiv").disabled = true;

                // Parse response
                parsed = JSON.parse(response);
                keys = Object.keys(parsed);
                values = Object.values(parsed);

                prmptMsg = "Enter the number of artists to display at a time or 'all' to display every artist";
                increment = prompt(prmptMsg);

                while (isNumber(increment) == false && increment != "all" && increment != null) {
                    increment = prompt(prmptMsg);
                }

                if (increment == "all") {
                    tracker = keys.length;
                    for (i = start; i < keys.length; i++) {
                        var tr = document.createElement('tr');
                        var rankTd = document.createElement('td');
                        rankTd.appendChild(document.createTextNode(i + 1));
                        var td = document.createElement('td');
                        td.appendChild(document.createTextNode(keys[i]));
                        var td1 = document.createElement('td');
                        td1.appendChild(document.createTextNode(convert(values[i])));
                        var td2 = document.createElement('td');
                        totPct = ((values[i] / tot) * 100).toFixed(2);
                        if (totPct < 0.1) {
                            totPct = ((values[i] / tot) * 100).toFixed(5);
                        }
                        td2.appendChild(document.createTextNode(String(totPct) + " %"));

                        tr.appendChild(rankTd);
                        tr.appendChild(td);
                        tr.appendChild(td1);
                        tr.appendChild(td2);

                        table.appendChild(tr);
                    }
                    document.body.removeChild(document.getElementById("indexDiv"));
                    document.body.appendChild(topDiv);
                }
                else if (increment != null)
                {
                    increment = parseInt(increment);
                    tracker += increment;
                    remainder = keys.length % increment;
                    if (remainder == 0) {
                        remainder = increment;
                    }

                    for (i = start; i < tracker && i < keys.length; i++) {
                        var tr = document.createElement('tr');
                        var rankTd = document.createElement('td');
                        rankTd.appendChild(document.createTextNode(i + 1));
                        var td = document.createElement('td');
                        td.appendChild(document.createTextNode(keys[i]));
                        var td1 = document.createElement('td');
                        td1.appendChild(document.createTextNode(convert(values[i])));
                        var td2 = document.createElement('td');
                        totPct = ((values[i] / tot) * 100).toFixed(2);
                        if (totPct < 0.1) {
                            totPct = ((values[i] / tot) * 100).toFixed(5);
                        }
                        td2.appendChild(document.createTextNode(String(totPct) + " %"));

                        tr.appendChild(rankTd);
                        tr.appendChild(td);
                        tr.appendChild(td1);
                        tr.appendChild(td2);

                        table.appendChild(tr);
                    }
                }
                graphDiv.appendChild(table);
                if (increment > 25)
                {
                    document.body.appendChild(topDiv);
                }
            }
        });
        requestA.fail(function (jqXHR, textStatus)
        {
            var textDiv = document.createElement('div');
            textDiv.align = "center";
            var textString = "If you are not logged in please click on the login tab to do so. If you are logged in then there was something wrong with the file upload. Create a new username and reupload the correct files."
            var h3 = document.createElement("h3");
            h3.appendChild(document.createTextNode(textString));
            textDiv.appendChild(h3);
            document.body.appendChild(textDiv);
        });
        requestA.done(function () {
            // TABLE SHOULD BE COMPLETELY CREATED BY HERE?
            sorttable.makeSortable(table);
        });
    }

createTable() 函数：

function createTable(status)                            // If status == 1, images are needed
    {
        var table = document.createElement('table');

        var tHead = document.createElement('tHead');
        var tr = document.createElement('tr');
        var th = document.createElement('th');
        th.appendChild(document.createTextNode("Ranking"));
        var th0 = document.createElement('th');
        th0.appendChild(document.createTextNode("Artist"));
        var th1 = document.createElement('th');
        th1.appendChild(document.createTextNode("Time Played"));
        var th2 = document.createElement('th');
        th2.appendChild(document.createTextNode("Percentage of Streaming History"));

        tr.appendChild(th);
        tr.appendChild(th0);
        tr.appendChild(th1);
        tr.appendChild(th2);

        if (status == 1)
        {
            var th3 = document.createElement('th');
            th3.appendChild(document.createTextNode("Image"));
            tr.appendChild(th3);
        }
        tHead.appendChild(tr);
        table.appendChild(tHead);
        return table;
    }

标签： ajaxhtml-tablesorttable.jshtml-tbody