Question

我成功地在JavaScript中创建了一个非常基本的（没有'for循环'，我是初学者）表，标记在HTML按钮上。 完美无缺！

<input type='button' value='Table' onclick='createTbl()' />


function createTbl() {

    //set up elements
    tbl = document.createElement('table');
    tr = document.createElement('tr');
    th1 = document.createElement('th');
    th2 = document.createElement('th');

   //contents
    content1 = document.createTextNode('Last Name');
    content2 = document.createTextNode('First Name');

    //append
    row1 = tbl.appendChild(tr);

    row1.appendChild(th1).appendChild(content1);
    row1.appendChild(th2).appendchild(content2);

    //display
    document.body.appendChild(tbl);
}

但是，当我删除封闭功能时，......：

//same code here but tagging the 'var' with each variable used

...一切都消失了，只留下HTML按钮！我评论了按钮，但这里也没有运气。

为什么？什么是魔术表（t）使其显示而不将其包含在函数中？

Answer 1

好吧，如果它只在函数中运行是因为你从你的onclick按钮调用它。否则代码就在那里，没有人在调用它。尝试在加载dom时调用该函数以确保所有内容都已加载（document.onload = createTbl）

Answer 2

好的，所以我部分地弄明白了这个问题：我忘记了我是在HTML的head部分编写脚本。我认为这解释了为什么按钮完美无缺。所以我只移动了函数内部的代码（因为我希望它不是一个函数）并将它放在body部分的script标签内并点击刷新。起初什么也没发生，直到我添加了这些：

<div id='table-div'>
    <!--table here-->
</div>

脚本：

//display table    
document.getElementById('table-div').appendChild(tbl);

就在那里！所有这一切只有一行和两列！

出于好奇，我想知道是否可以将代码放回头部并使用我新发现的解决方案。因此，回到head部分的代码，我做了一些小改动来显示表：

//display table
document.body.getElementById('table-div').appendChild(tbl);

这里没有雪茄。也许是糟糕的JavaScript术语。然而，发现div是我的代码所需的魔术表（t）仍然是好的。

基本JavaScript创建表查询

2 个答案: