JQuery 将 thead 和 tbody 附加到表中答案

【问题标题】：JQuery append thead and tbody to tableJQuery 将 thead 和 tbody 附加到表中
【发布时间】：2018-04-06 10:50:14
【问题描述】：

我正在使用 JQuery 来构建一个 DataTable。但是我收到c is undefined 错误。这是因为我的代码不包括 thead 和 tbody。

如何将thead 和tbody 添加到以下代码中？

我尝试添加 dataSrc: "Data"，但没有成功。我知道 DataTables 需要它的格式正确。

     function getItemStyles() {
            try
            {
                //fetch item styles
                $.ajax({
                    cache: false,
                    dataSrc: "Data",
                    url: 'manage-prices-get-item-styles',
                    data: {},
                    type: 'post',
                    success: getItemStylesSucess,
                    error: fail
                });
            }
            catch(e){
                alert(e.message);
            }
        }


  function getItemStylesSucess(result) {
        try
        {
            var output = '';

            if (result.success == true) {
                //build table
                var xmlDoc = $.parseXML(result.message);
                var list = $(xmlDoc).find("Inventory");

                //Create a HTML Table element.
                var table = $("<table id='item-style-table' class='table table-bordered table-striped' />");
                table[0].border = "1";

                //Add the header row.
                var row = $(table[0].insertRow(-1));
                list.eq(0).children().each(function () {
                    var headerCell = $("<th />");
                    headerCell.html(this.nodeName);
                    row.append(headerCell);
                });
                table[0].append('</thead>');

                //Add the data rows.
                $(list).each(function () {
                    row = $(table[0].insertRow(-1));
                    $(this).children().each(function () {
                        var cell = $("<td />");
                        cell.html($(this).text());
                        row.append(cell);
                    });
                });

                var dvTable = $("#item-styles");
                dvTable.html("");
                dvTable.append(table);
                $("#item-style-table").DataTable();

            }
            else {
                output = result.message;
            }

            $('#item-styles-load').css('display', 'none');

        }
        catch (e) {
            alert(e.message);
        }
    }

【问题讨论】：

...只是追加它？
我尝试了不同的方式。仍然在尝试。虽然没有做对：/它会在所有不同的地方进行
检查this
我已经查看了那篇文章 :) 进行了搜索以找到解决方案。试过了，但没有用。现在更新我的问题以包含 Ajax 调用

标签： javascript jquery

【解决方案1】：

修改代码如下，100%正常运行。

参考：DataTables when HTML table is created through import of xml

function getItemStylesSucess(result) {
        try
        {
            var output = '';

            if (result.success == true) {
                //build table
                $("#item-styles").DataTable({
                    data: loadItemStylesData(result.message)
                })

            }
            else {
                output = result.message;
            }

            $('#item-styles-load').css('display', 'none');

        }
        catch (e) {
            alert(e.message);
        }
    }

    function loadItemStylesData(rocol) {
        var data = [];
        $(rocol).find('Inventory').each(function () {
            data.push([
                       $(this).find("InventoryID").text(),
                       $(this).find("SytleColour").text()
            ])
        })
        return data;
    }

【讨论】：