我对JS和HTML技术都比较陌生,所以请耐心听我讲。我有一个名为loadData()的函数,它会在页面加载时被调用,动态创建一个HTML表格。我想修改表格的一些方面,需要使用updateTable函数。我试图将这些修改包含在loadData方法的末尾,但是没有任何反应。然而,如果我将这些更新移到一个单独的函数中,并通过按钮单击调用该函数,则可以进行更新。即使我在loadData的末尾调用updateTable,它也不起作用。我甚至尝试将onLoad属性附加到表格上,以便调用updateTable()。
我觉得这种行为的原因是,在loadData函数内部触发更新时,表格实际上尚未加载,因此JS试图修改甚至不存在的元素。但是,我无论如何都无法弄清楚为什么这样做会导致问题,即使在loadData函数的末尾调用updateTable函数...
function updateTable() {
var tbl = document.getElementById("dataTable");
var rows = document.getElementsByTagName("tr");
maxCols = 0;
for ( var i = 1; i < rows.length; i++ ) {
var cols = rows[i].cells.length;
if ( cols > maxCols ){
maxCols = cols;
}
}
headerCols = rows[0].cells.length;
diff = maxCols - headerCols + 1;
tbl.rows[0].cells[3].colSpan = diff;
tbl.rows[0].cells[3].align = "center";
for ( var i = 1; i < rows.length; i++ ) {
var cols = rows[i].cells.length;
for (var a=cols; a < maxCols; a++){
rows[i].insertCell(a);
}
}
//console.log(maxCols);
}
function loadData() {
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select('#contTable');
.append("table").attr('class','table').attr('id','dataTable')
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) {
return d;
}).enter()
.append("td")
.text(function(d) {
return d;
});
});
}
任何见解都将不胜感激。
谢谢!