Question

我正在使用Javascript将表行动态添加到表中。

添加行时，items.length没有增加的原因吗？

我还试图对每一行中包含的数字求和。但这也不起作用。由于某些原因，动态添加的行将被完全忽略。

我来自jQuery，这些东西曾经可以工作。

我可能在这里错过了一些非常基本的东西。感谢您的指导。

document.addEventListener("DOMContentLoaded", function() {

  var form = document.querySelector("#form");
  var items = form.querySelectorAll(".item");

  form.addEventListener("click", function(event) {
    if (event.target.className == ".add_item") {
      addFields(event);
    }
  });

  function addFields(event) {
    var item = document.createElement("template");
    item.innerHTML = fields.trim();
    items[items.length - 1].insertAdjacentElement("afterend", item.content.firstChild);
    console.log(items.length);
    event.preventDefault();
  }

})

Answer 1

querySelector和querySelectorAll返回NodeList，其中getElementsByClassName返回HTMLCollection。

区别在于，NodeList是静态副本，而HTMLCollection是活动副本。因此，如果修改了element，例如在您的情况下，添加了新行，则HTMLCollection将起作用，而NodeList将不起作用。

正在更改

var items = form.querySelectorAll(".item")

到

var items = form.getElementsByClassName("item")

可以解决问题。

指针

您不能在getElementsByClassName中使用选择器。它需要一个className，因此不能使用#form .item之类的复合选择器。

参考：

Difference between HTMLCollection, NodeLists, and arrays of objects

Answer 2

您只在这里查询一次项目：

var items = form.querySelectorAll(".item");

form.addEventListener(
  //you call addItem here
)

function addItem(){
  //you access items.length here
}

每次添加项目时，您都需要重新查询选择器。

var items = form.querySelectorAll(".item"); //i got queried for the 1st time

function addFields(event) {
  items = form.querySelectorAll(".item"); //get items again

  //...
}

或者就是根本不要在addFields()之外进行查询。将var items = ...放在函数中。无需将其放在外面。

阅读@Rajesh的answer为何会这样。

如何对用Javascript动态添加的元素求和？

2 个答案:

参考：