3

我需要使用 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() 方法，从而覆盖了表格内容。显然我在做一些愚蠢的事情 - 谁能告诉我正确的方法应该是什么？

谢谢。

4

2 回答 2

1

我发现了问题。在我的 HTML 文档中，用于导航到 FIRST 和 NEXT 的按钮位于与“获取”操作相关联的表单标记内。我使用绑定到这些按钮的函数来测试我的 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";
    }
}

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

谢谢你。

于 2013-08-16T08:44:30.843 回答
0

查看您的代码会很有用 - 但从您所说的来看，您的问题似乎类似于以下内容：

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

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

于 2013-08-13T13:03:13.483 回答