在生成动态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;
            });
    });
}

任何见解都将不胜感激。

谢谢！

- Chris LaMendola

---

需要HTML来准确查看每个函数的声明、定义、调用等信息。 - zer00ne

Answer 1

在您发布的代码中，根本没有调用updateTable。本答案假设您在loadData的最后调用updateTable时出现了观察到的行为，而不是在d3.text回调之外进行调用。

将updateTable的调用移动到d3.text回调的末尾，这样它就会在设置完#dataTable后立即运行。

您的怀疑是正确的。d3.text异步加载data.csv，因此创建#dataTable的代码直到浏览器检索到data.csv之后才会运行。与此同时，loadData的其余部分继续执行。它会碰到updateTable，但由于引擎还没有机会运行d3.text回调，所以没有#dataTable可以操作。 有关JavaScript异步性的更多信息，请参见此答案。

- AuxTaco

---

谢谢，AuxTaco！我把updateTable移动到d3.text回调函数内部，它起作用了！同步/异步处理的概念对我来说有点陌生，因为我熟悉的所有bash/python脚本都是同步执行的，除非另有规定。我需要阅读一些关于异步性的文章。再次感谢！ - Chris LaMendola