如何使用JavaScript从数据库中添加不同的列到动态表格

Question

如何使用JavaScript从数据库中添加不同的列到动态表格

7

我有一个函数可以构建动态表格。我在想如何将每一列设置为来自数据库的不同数据集。目前，每一列都显示相同的值。

背景：我正在构建一个具有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个变量，但这样做只会将它们放在同一个框中，并在整个表格中重复。

- JBaldwin

你手动运行过 AJAX 调用以查看它返回了什么数据吗？如果是，请将其添加到问题中。除非确实相关，否则请删除 [mysql] 标签。 - Rick James

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Trey · Accepted Answer

看起来你在每一行都打印了相同的数据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];

Becomes:

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

这只是一种猜测，因为我无法看到实际数据。