我有一个构建动态表的函数.我无法弄清楚如何将每列设置为数据库中的不同数据集.现在它只在每列中显示相同的值.
一点背景.我正在构建一个包含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个变量,但是当我这样做时,它只是将它们放在同一个框中并在整个表中重复.
解决方法
看起来您每行打印完全相同的数据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];
这只是猜测,因为我无法看到实际数据.
