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

在您发布的代码中，updateTable未被称为。这个答案假定当您在updateTable回调之外的loadData末尾致电d3.text时，会发生您观察到的行为。

将来电updateTable移至d3.text回调的末尾，以便在设置#dataTable后立即投放。

你的怀疑是正确的。 d3.text异步加载data.csv，因此创建#dataTable的代码在浏览器检索data.csv之后才会运行。与此同时，loadData的其余部分一直在继续。它会点击updateTable，但由于引擎尚未有机会运行d3.text回调，因此无法运行#dataTable。

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

生成后修改动态HTML表

1 个答案: