如何使用javascript從數據庫向動態表添加不同的列

Question

我有一個構建動態表的函數。 我無法弄清楚如何將每列設置為數據庫中的不同數據集。 現在它只在每列中顯示相同的值。

一點背景。 我正在構建一個包含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個變量，但是當我這樣做時，它只是將它們放在同一個框中並在整個表中重復。

Answer 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];

這只是一個猜測，因為我看不到實際的數據。