2

私はjavascriptが初めてです。を使用して、ユーザーのウィンドウ サイズに基づいて行と列を再配置したい目次がありますwindow.onresize。

window.onresize = function () {

    var w = window.innerWidth;
    var nocolumn = Math.floor(w / 252);
    if (nocolumn == 0) {
        nocolumn = 1;
    }

    var table = document.getElementById("MainContent_DataList1");
    var tbody = table.getElementsByTagName("tbody")[0];
    var link = tbody.getElementsByTagName("a");

    var norow = Math.ceil(link.length / nocolumn);
    tbody.innerHTML = "";

    console.log(norow + " " + link.length + " " + nocolumn);
    for (var i = 0; i < norow; i++) {
        var row = document.createElement("tr");
        tbody.appendChild(row);
        for (var j = 0; j < nocolumn; j++) {
            var cell = document.createElement("td");
            row.appendChild(cell);
            if ((i * nocolumn + j) < link.length) {
                cell.appendChild(link[i * nocolumn + j]);
            }
        }
    }
};

使用後に変数「リンク」配列が空になる理由がわかりませんinnerHTML = "";が、クリアする前に保存しました。それは私が間違っていた場所ですか、それともこれを行う他の方法がありますか?

4

2 に答える 2

1

innerHTML を削除すると、DOM オブジェクトが削除されるため、DOM オブジェクトへのすべての参照が null を指します。

これを回避するには、これらのオブジェクトを複製します。

function clone(obj) {
    if (null == obj || "object" != typeof obj) return obj;
    var copy = {};
    for (var attr in obj) {
        if (obj.hasOwnProperty(attr)) copy[attr] = obj[attr];
    }
    return copy;
}

window.onresize = function () {

    var w = window.innerWidth;
    var nocolumn = Math.floor(w / 252);
    if (nocolumn == 0) {
        nocolumn = 1;
    }

    var table = document.getElementById("MainContent_DataList1");
    var tbody = table.getElementsByTagName("tbody")[0];
    var tmp = tbody.getElementsByTagName("a");
    var link = clone(tmp);

    var norow = Math.ceil(link.length / nocolumn);
    tbody.innerHTML = "";

    ...
}

メソッドのクレジットclone(): https://stackoverflow.com/a/728694/1057429

于 2013-06-17T02:49:10.350 に答える