javascript - 带有 appendChild 变为未定义的简单 Javascript 分页器

Question

我已经看过一点，所以我把它扔在这里。我想为网站上的大表格制作自己的简单分页，但遇到了障碍。这是我的代码/标记:

window.addEventListener('load', function() {
  table_pagers = document.getElementsByClassName("pagination");

  paginate_tables(table_pagers);
});

function paginate_tables(table_pagers) {
  for (var i = 0; i <= table_pagers.length - 1; i++) {
    table_pagers[i].innerHTML = make_nums(table_pagers[i]);
  }
};

function make_nums(table_sibling) {
  table = table_sibling.previousElementSibling.children[1];
  nums = table.childElementCount / 10;
  for (var i = 0; i <= 2; i++) {
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.textContent = i;
    a.href = "\'#\'"
    li.appendChild(a);
    table_sibling.appendChild(li);
  }
};

<table class="table">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>
<ul class="pagination">
</ul>

令人难以置信的问题(我尝试了 insert adjacentHTML 和 appendChild)是这段代码将完美地插入列表项，但是一旦它退出 make_nums 函数，整个 li 集就会变成未定义的。

或者，如果我替换表，它们都会完美地附加到表的末尾，但当然它们需要在 ul 中，而不是表中。我到底在这里没看到什么？

Answer 1

问题出在这里:

    table_pagers[i].innerHTML = make_nums(table_pagers[i]);
//  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^

您的 make_nums 函数不返回任何特定值，因此调用它的结果是 undefined。然后您将使用它来替换列表的内容。

您的函数已经将元素添加到列表中，因此没有理由设置 innerHTML；只需删除上面带下划线的部分:

window.addEventListener('load', function() {
  var table_pagers = document.getElementsByClassName("pagination");

  paginate_tables(table_pagers);
});

function paginate_tables(table_pagers) {
  for (var i = 0; i <= table_pagers.length - 1; i++) {
    make_nums(table_pagers[i]);
  }
};

function make_nums(table_sibling) {
  var table = table_sibling.previousElementSibling.children[1];
  var nums = table.childElementCount / 10;
  for (var i = 0; i <= 2; i++) {
    var li = document.createElement('li');
    var a = document.createElement('a');
    a.textContent = i;
    a.href = "\'#\'"
    li.appendChild(a);
    table_sibling.appendChild(li);
  }
};

<table class="table">
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>
<ul class="pagination">
</ul>

---

旁注:您的代码也成为 The Horror of Implicit Globals 的牺牲品(那是我贫血的小博客上的帖子)。请务必声明您的变量。我在上面添加了 table_pagers、table 和 nums 的声明。