javascript - 如何使用 Javascript 构建表格并自动刷新

Question

我需要使用 Javascript 生成一个 HTML 表格，然后定期自动更新它(替换表格内容)。由于我正在编写嵌入式应用程序，所以我没有空间使用 JQuery。

1 - 我可以用 HTML 创建表格并使用 JavaScript .innerHTML 替换表格内容。但是，用户希望根据自己的喜好设置表格大小(行数)。

2 - 我创建了代码来删除旧行并将新行连同更新后的内容插入表中。这导致在 FireFox 和 IE 中出现令人不快的脉冲( Accordion )显示。

因此，我认为我需要根据用户需要的行数在 JavaScript 中创建表格，然后使用 HttpRequest 从服务器拉取的最新数据替换每一行的内容。

文件:namelog.js

var TableLen; //Number of rows in table
var TablePos; //Pos for first row in data table
var TableAuto; //Auto/manual refresh flag
var IntervalId;

function onLoad() {

    //Table length will be taken from parameter in HTML page
    TableLen = 10;

    TableAuto = false;
    buildTable();

    first();

}

function first() {
    //Fill table starting at data position #1
    TablePos = 1;
    fillTable();

}

function next() {
    //Fill table from last used data position
    fillTable();

}

function auto() {
    //Periodically fill table starting at data position #1
    first();

}

function buildTable() {
    var HtmlTable;

    HtmlTable = $("iTable");
    for (var RowPos = 0; RowPos < TableLen; RowPos++) {
        //Create row and assign CSS classname for alternate colours
        HtmlRow = HtmlTable.insertRow(RowPos);
        HtmlRow.id = "iRow" + RowPos.toString();
        HtmlRow.insertCell(0).innerHTML = "&nbsp";
        HtmlRow.insertCell(1).innerHTML = "-";
        HtmlRow.insertCell(2).innerHTML = "-";
        HtmlRow.insertCell(3).innerHTML = "-";
        HtmlRow.insertCell(4).innerHTML = "&nbsp";
        HtmlRow.insertCell(5).innerHTML = "-";
        HtmlRow.insertCell(6).innerHTML = "&nbsp";
        if (RowPos % 2) {
            HtmlRow.className = "cRowE";
        } else {
            HtmlRow.className = "cRowO";
        }
    }
}

function fillTable() {
    var HtmlRow;

    //Dynamic data will be pulled from server on embedded device but
    //for now populate table with static data.
    for (var RowPos = 0; RowPos < TableLen; RowPos++) {
        HtmlRow = $("iRow" + RowPos.toString());
        HtmlRow.childNodes[0].innerHTML = TablePos.toString();
        HtmlRow.childNodes[1].innerHTML = "Mary";
        HtmlRow.childNodes[2].innerHTML = "Steenburgen";
        HtmlRow.childNodes[3].innerHTML = "59";

        TablePos++;
    }

}

function $(id) {
    return document.getElementById(id);
}

function $create(element) {
    return document.createElement(element);
}

function showButton(Id, Flag) {
    if (Flag) {
        $(Id).style.visibility = "visible";
    } else {
        $(Id).style.visibility = "hidden";
    }
}

问题是这种方法似乎在用数据填充单元格后调用 .onLoad() 方法，从而覆盖表格内容。显然我在做一些愚蠢的事情 - 谁能告诉我正确的方法应该是什么？

感谢。

Answer 1

我发现了问题。在我的 HTML 文档中，我用来导航到 FIRST 和 NEXT 的按钮位于与“获取”操作关联的表单标签内。我使用绑定(bind)到这些按钮的函数来测试我的 JavaScript。单击 FIRST 和 NEXT 按钮调用表更新表按预期运行，但随后提交了表单，从而导致文档加载事件重新触发并再次重建空白表。

因此，构建和动态更新表的一种正确方法是:

1 - 使用 insertRow() 和 insertCell() 方法在加载事件调用的函数中构建表。

function BuildTable() {
    var HtmlTable = document.getElementById("iTable");
    var HtmlRow;

    for (var RowPos = 0; RowPos < TableLen; RowPos++) {
        HtmlRow = HtmlTable.insertRow(RowPos);

        //Assign ID to each row
        HtmlRow.id = "iRow" + RowPos.toString();

        //Insert cells or table columns
        HtmlRow.insertCell(0).innerHTML = "&nbsp";
        HTMLRow.insertCell(1).innerHtml = "&nbsp";

    }
}

2 - 通过获取对每个行对象的引用(使用集合迭代器或按行 ID)调用函数来替换单元格内容，并使用 ROW.childNodes[column].innerHTML = 语句替换每个单元格。

function FillTable() {
    var HtmlRow;

    //Dynamic data is generated or pulled from other resource for now use fixed string
    for (var RowPos = 0; RowPos < TableLen; RowPos++) {
        HtmlRow = document.getElementById("iRow" + RowPos.toString());
        HtmlRow.childNodes[0].innerHTML = RowPos.toString();
        HtmlRow.choldNodes[1].innerHTML = "Mary";
    }
}

我希望这篇文章能帮助遇到同样问题的其他人。

谢谢。