Question

我需要使用Javascript生成HTML表格，然后定期自动更新（替换表格内容）。由于我正在编写嵌入式应用程序，因此我没有JQuery的空间。

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

2 - 我创建了删除旧行的代码，并将新行与更新的内容一起插入表中。这导致FireFox和IE中出现令人不快的脉冲（手风琴）显示。

因此，我认为我需要根据用户所需的行数在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（）方法，从而覆盖表格内容。显然，我正在做一些愚蠢的事情 - 任何人都可以告诉我应该采取什么样的正确方法？

日Thnx。

Answer 1

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

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

1 - 使用insertRow（）和insertCell（）方法在load事件调用的函数内构建表。

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 = statements替换每个单元格来调用函数来替换单元格内容。

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";
    }
}

我希望此帖可以帮助其他人解决同样的问题。

谢谢。

Answer 2

看到你的代码会很有用 - 但是根据你的说法，你的问题看起来像是这样的：

var myList;

function onLoad() {
  myList = [0,1,2,3,4,5];
}

function update() {
  myList = [5,4,3,2,1];
}

// run this on page load
onLoad();

// run this 5 seconds later
setTimeout(update(),5000);

每次运行'update（）'函数时，它不会将新项目附加到列表中，而是覆盖原始列表。这听起来与你的问题相似。

您正在使用.innerHTML添加内容 - 这将覆盖您现有的内容。除非你做这样的事情：

// note the += operator
childNode[i].innerHTML += "This content will be appended to the inner HTML.";

如果不是这样，请发布代码示例，以便我们查看。

如何使用Javascript和自动刷新构建表

2 个答案: