javascript - 需要帮助理解行创建方法之间的差异

Question

我正在编写代码来从文件中读取内容并将其内容写入表中，然后根据单击的行执行操作。

我创建了一个 jsfiddle 来读取文件并创建行，但我很难理解如何选择正确的行。

http://jsfiddle.net/x1zjq3sv/4/

我试图仅选择具有特定 ID 的表的行(不包括标题中的行)。

我尝试过:

var table = document.getElementById("TableID");
var tbod = table.getElementsByTagName("tbody")[0];
var rows = tbod.getElementsByTagName("tr");

但是生成的变量“tbod”似乎没有内部 HTML，因此变量“rows”只是空的。谁能解释一下为什么似乎没有选择任何内容？

这是一个示例输入文件:

输入.txt: http://pastebin.com/d4MqDiYW

Answer 1

您正确地选择了所有内容，但为时过早...

在您的 jsfiddle 示例中，您有以下内容(将代码 trim 到相关部分):

document.getElementById('file').onchange = function() {
  var reader = new FileReader();
  reader.onload = function() {
    // (create table rows...)
    // but this doesn't happen until the onload event is fired!
  }
  reader.readAsText(this.files[0]);
  addRowHandlers(); // reader.onload has been defined, but didn't fire yet!
}

因此，您需要做的就是从您的 onload 处理程序中调用 addRowHandlers() :

...
reader.onload = function() {
  // (create table rows...)
  addRowHandlers(); // now there are rows to select :)
}