jQuery和向表格中添加行

Question

我有以下的jQuery代码。

var destTable = $("#numbers");
$(document).ready(function() {
  $("#btnAdd").click(function() {
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr><td>hi</td></tr>");
   $("#numbers").append(newRow);
  });
});

我真正想要的是只存储一个元素的引用，然后从那里使用它。

上面的代码按预期向表中添加了一行，但如果我使用$(destTable).append(newRow)或destTable.append(newRow)，什么都不会发生，有人可以为我解释一下吗？

谢谢

- RubbleFord

Answer 1

将引用保留在document.ready内：

$(document).ready(function() {
  var destTable = $("#numbers");
  $("#btnAdd").click(function() {
   //Take the text, and also the ddl value and insert as table row.
   var newRow = $("<tr><td>hi</td></tr>");
   $("#numbers").append(newRow);
  });
});

document.ready的作用是等待DOM加载完成；如果你在其外尝试使用$('#numbers');(而且代码不在元素后面)，那么DOM将尚未创建此元素，因此您将无法正确引用它。

一旦您这样做了，您就可以执行以下操作：

destTable.append(newRow);

在 click 函数内部。
然而，一个常见且被接受的做法是在表示 jQuery 集合的变量前加上 $ 前缀。所以最好写成这样：

var $destTable = $("#numbers");

- Paolo Bergantino

---

当我仔细考虑后就觉得很有道理，谢谢你的帮助，真是有效。 - RubbleFord

Answer 2

你可以像这样使用 appendTo：

$("<tr><td>Hello</td><tr>").appendTo("#MyTable > tbody") 

- benahm

---

这不应该是<tr><td>Hello</td></tr>吗？ - MadMaardigan

@MadMaardigan 是的！ :) - benahm