使用 Javascript 生成 HTML table 在我的主要 div 中产生未定义

Using Javascript generated HTML table yields undefined in my main div

我正在使用 javascript 生成 table,它正在工作并显示我的 table,但由于某种原因,我的 table 中也弹出了一个未定义的table 之前的查看器,我不知道它来自哪里。我认为这可能是因为我的函数通过标签名称 "body" 获取元素,而我的 div 在主体内部,并且我在 div 上使用 innerHTML ?但我试过将 div 放在 body 的外面,我试过通过 id 名称获取元素,但我不知道如何摆脱未定义的元素。我只想在 division 中生成我的 table,这样我就可以创建其他 division 来放入其他内容。我不只是想要 table体内产生。

我的HTML是:

  <body>
   <div id="eobody">

   </div>
  </body>

我的 JS 包含:

 var body = document.getElementsByTagName("body")[0]; //to start building the table

 document.getElementById("eobody").innerHTML = generate_table(paras1);
 //runs the function that generates my table inside eobody

我试过将 body 更改为 div,并将其更改为根据 ID 获取元素,并将 body 放入更大的 division 但我不太确定是什么原因导致未定义

这是我在 https://jsfiddle.net/msirkin/duw5nyqe/8/ 工作的 fiddle [第112行和第174行是我说的2行]

查看您的 JSFiddle,generate_table() 函数没有 return 值,因此 JavaScript 的默认 return 值 undefined 是return调用函数时编辑。

鉴于 generate_table() 在最后完成所有注入:

tbl.appendChild(tblHead);
document.getElementsByTagName("table").className = "tableizer-table";
tbl.appendChild(tblBody);
body.appendChild(tbl);

调用该函数后,您无需向 div 注入任何内容。

如果您想将它注入到您的 div 中,您可以将它用作最后一行的 appendChild() 源元素,而不是 body。例如 document.getElementById('eobody').appendChild(tbl);