javascript - 生成动态 HTML 表格后对其进行修改

Question

一般来说，我对 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;
            });
    });
}

如有任何见解，我们将不胜感激。

谢谢!

Answer 1

In the code you posted, updateTable isn't called at all. This answer assumes your observed behavior happens when you call updateTable at the very end of loadData, outside the d3.text callback.

将对 updateTable 的调用移动到 d3.text 回调的末尾，以便在设置 #dataTable 后立即运行上。

您的猜测是正确的。 d3.text 异步加载 data.csv，因此创建 #dataTable 的代码直到浏览器检索到 后才会运行数据.csv。与此同时，loadData 的其余部分继续进行。它命中了 updateTable，但是由于引擎还没有机会运行 d3.text 回调，所以没有 #dataTable 可以操作上。

For more on Javascript's asynchronicity, see this answer.