JQuery 将 thead 和 tbody 附加到表中

Posted 2023-05-07

【中文标题】JQuery 将 thead 和 tbody 附加到表中

【英文标题】：JQuery append thead and tbody to table

【发布时间】：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 调用

【参考方案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;