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>

令人难以置信的问题（我尝试插入adjacentHTML和appendChild）是否这个代码将完美地插入列表项，但是一旦它退出make_nums函数，整个li的集合将变为未定义。

或者如果我用table替换它们，它们都完全追加到表的末尾，但当然它们需要在ul而不是table中。我到底在这里看到了什么？

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添加了声明。

Answer 2

是的，正如T.J Crowder所建议的那样，问题出在这一行：

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

在这里，你正在设置innerHTML，而你已经将li添加到了make_nums（）函数中的ul。

作为旁注，尽管使用var inside_nums（）函数声明变量table, nums是好的，但它们看起来与函数无关。你真的需要它们吗？如果没有，你可以清理它们！

简单的Javascript Paginator与appendChild变成undefined

2 个答案: