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

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 に答える