如何使用javascript从数据库中向动态表中添加不同的列

Posted 2023-02-22

【中文标题】如何使用javascript从数据库中向动态表中添加不同的列

【英文标题】：How to add different columns to a dynamic table from database with javascript

【发布时间】：2017-06-10 20:19:39

【问题描述】：

我有一个构建动态表的函数。我无法弄清楚如何将每列设置为数据库中的不同数据集。现在它只是在每一列中显示相同的值。

一点背景。我正在构建一个有 6 列和很多行的表（这一切都取决于数据库有多少数据）。现在它只显示所有 6 列中的一列，所以它们重复。

如何将每列设置为 6 列的不同值？

    function addTable() 
        var len = errorTableData.length;
        var myTableDiv = document.getElementById("myDynamicTable");
        var table = document.createElement('TABLE');
        table.border='1';
        table.id = "dataTable";
        var tableBody = document.createElement('TBODY');
        table.appendChild(tableBody);

        for (var i=0; i<len; i++)
            var tr = document.createElement('TR');
            tr.className = "rowEditData";
            tableBody.appendChild(tr);

            for (var j=0; j<6; j++)
                var countyName = errorTableData['CountyName'][i];
                var stateName = errorTableData['StateName'][i];
                var td = document.createElement('TD');
                td.className = "mdl-data-table__cell--non-numeric";
                td.appendChild(document.createTextNode(countyName));
                td.appendChild(document.createTextNode(stateName));
                tr.appendChild(td);
            
        
        myTableDiv.appendChild(table);
    

这里是ajax调用：

        function triggerDataTable(index) 
        // Make AJAX requests for model systems
        $.ajax(
            type: "POST",
            url: "qry/getAllData.php",
            async: true,
            dataType: "html",
            data: ErrorOptions: control.settings.errorOptions,
            success: function (result) 
                //console.warn(result);
                errorData = JSON.parse(result);
                //loop through data
                var len = errorData.length;
                for(i=0; i<len; i++) 
                    if ('VersionKey' in errorData[i]) 
                        vKey = (errorData[i]['VersionKey']);
                     else if ('ErrorCode' in errorData[i]) 
                        var errorCode = (errorData[i]['ErrorCode']);
                     else if ('SourceKey' in errorData[i]) 
                        var sourceKey = (errorData[i]['SourceKey']);
                     else  //data here
                        errorTableData = errorData[i];
                    
                
                addTable();
            
        );
    

errorData 是来自数据库的数据。如您所见，我尝试添加 2 个变量，但是当我这样做时，它只是将它们放在同一个框中并在整个表中重复。

【问题讨论】：

您是否手动运行 AJAX 调用以查看它返回的数据？如果是这样，请将其添加到问题中。并删除 [mysql] 标签，除非它确实相关。

【参考方案1】：

看起来您要为每行打印 6 次完全相同的数据。您创建一个td 元素，然后向其中添加国家和州名称，但是您用于数据集索引的变量来自您的外部循环，因此在内部循环中它永远不会改变，而您实际上是每次获取相同的值：

function addTable() 
    var len = errorTableData.length;
    var myTableDiv = document.getElementById("myDynamicTable");
    var table = document.createElement('TABLE');
    table.border='1';
    table.id = "dataTable";
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);

    for (var i=0; i<len; i++)

        // You set i here, presumably to get each row in your dataset

        var tr = document.createElement('TR');
        tr.className = "rowEditData";
        tableBody.appendChild(tr);

        for (var j=0; j<6; j++)
            var countyName = errorTableData['CountyName'][i];
            var stateName = errorTableData['StateName'][i];

            // Above, you are using i, not j

            var td = document.createElement('TD');
            td.className = "mdl-data-table__cell--non-numeric";
            td.appendChild(document.createTextNode(countyName));
            td.appendChild(document.createTextNode(stateName));
            tr.appendChild(td);
        
    
    myTableDiv.appendChild(table);

如果您可以使用从数据库中获取的数据发布一些 json，这将更容易提供帮助

根据您帖子上的编辑并查看成功回调，我认为您有可以轻松解决的小问题：

首先，为errorTableData初始化一个空数组

success: function (result) 
    errorTableData = [];

在你的 if/else 块中：

 else  //data here
    errorTableData = errorData[i];

应该是：

 else  //data here
    errorTableData[i] = errorData[i];

然后在你的内部循环中：

var countyName = errorTableData['CountyName'][i];
var stateName = errorTableData['StateName'][i];

变成：

var countyName = errorTableData[i]['CountyName'][j];
var stateName = errorTableData[i]['StateName'][j];

这只是猜测，因为我看不到实际数据。

【讨论】：

谢谢你。我会试试看。我还更新了我的问题并添加了我用来从数据库中获取数据的 ajax 调用。

所以我刚刚注意到您没有对代码进行任何更改。我是否将 td 附加到第二个循环之外。我不是 100% 确定如何做到这一点。

在没有看到实际数据的情况下，我们无法给出很多好的方向，ajax 调用不会向我们展示您在成功处理程序中必须使用的内容。但我已经用我最好的猜测更新了我的答案

谢谢。返回的数据有 6 列，县、州名和其他列数据的一些数字。我试过你的代码，它可以工作，但它只打印出一行，每列都有县名和州名

如何让它打印单独的行，然后将县名和州名分开以分隔列？