Question

我是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]);
            }
        }
    }
};

我不明白为什么变量“link”数组在我使用innerHTML = "";后变为空，但我在清除之前将其存储起来。是在某个地方我做错了还是有其他方法可以做到这一点？

Answer 1

删除innerHTML时，删除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

Answer 2

正如其他答案所示， getElementsByTagName 会返回实时 NodeList。因此，当您从正文中删除所有元素时，NodeList将更新为不包含任何节点。

作为替代方案，您可以使用 querySelectorAll ，它返回一个静态NodeList，或者使用 getElementsByTagName 并在清除正文中的节点之前为数组分配引用，例如：

function getNodes() {
  var tbody = document.body || document.getElementsByTagName('body')[0];
  var nodes, link;

  if (tbody.querySelectorAll) {
    link = tbody.querySelectorAll('*');
  } else {
    nodes = tbody.getElementsByTagName("*");
    link = [];

    for (var i=0, iLen=nodes.length; i<iLen; i++) {
      link[i] = nodes[i];
    }
  }
  return link;
}

Javascript动态行列

2 个答案: