How to build table with Javascript AND auto refresh

Question

I need to generate an HTML table using Javascript and then automatically update it periodically (replacing the table content). Since I am writing an embedded application I don't have room for JQuery.

1 - I can create the table in HTML and use JavaScript .innerHTML to replace the table contents. However, users wish to set table size (number of rows) according to their preference.

2 - I created code to delete the old rows and insert new rows into the table along with the updated contents. This resulted in an unpleasant pulsing (accordion) display in FireFox and IE.

I therefore believe that I need to create the table in JavaScript according to the number of rows required by the user and then replace each of the row contents with the latest data pulled from the server using HttpRequest.

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

The problem is that this approach seems to call the .onLoad() method after filling the cells with data thus overwriting the table contents. Clearly I am doing something daft - can anyone please tell me what the correct approach should be?

Thnx.

Answer 1

I have found the problem. In my HTML document the buttons I used to navigate to FIRST and NEXT were located within a form tag which was associated with a "get" action. I was using functions bound to these buttons to test my JavaScript. Clicking the FIRST and NEXT buttons called the table update table functions as expected but then submitted the form thus causing the document load event to re-fire and rebuild a blank table again.

So one correct approach to build and dynamically update tables would be:

1 - Build the table within as function called by the load event using the insertRow() and insertCell() methods.

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 - Call functions to replace the cell contents by getting a reference to each row object (either using a collection iterator or by row id) and replacing each cell using 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";
    }
}

I hope this posting helps someone else with the same problem.

Thank you.