Question

我试图想出一种从头部动态写入正文中的表的方法，并且遇到了这个示例代码。问题是它使用'onload'调用函数。我需要从代码中的循环中调用函数来写入表。

<!DOCTYPE HTML>
<html>
<head>
<title>Untitled Document</title>

<style type="text/css">
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
</style>

<script type="text/javascript">
onload=function(){
var nrCols=2;
var maxRows=4;
var nrRows=maxRows+1;
while(nrRows>maxRows){
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
    row=document.createElement('tr');
    for(var j=0;j<nrCols;j++){
        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(i+' '+j))
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

我试着命名函数并摆脱onload并从头部的脚本中调用函数，但这不起作用。

Answer 1

你必须在html中将script 放在后使用function foobar()，然后再写foobar();

这是用于调用函数，但onload=function()也适用于<head>标记。原因是如果页面按顺序呈现其功能，并且<div>在页面到达时不会存在onload，但{{1}}表示之后页面已完成加载。

Answer 2

这并不困难。但首先你必须隔离js并标记。

隔离可以让您更好地进行代码管理。试试这个：

<强> HTML：

<div id="mydiv"></div>
<button id="btn">Click</button>

<强> JS：

writeToTable();
function writeToTable(){
var nrCols=2;
var maxRows=4;
var nrRows=maxRows+1;
while(nrRows>maxRows){
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
    row=document.createElement('tr');
    for(var j=0;j<nrCols;j++){
        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(i+' '+j))
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}

在此处找到有效的解决方案：http://jsfiddle.net/tx5Xd/

Answer 3

我不确定我是否完全理解这个问题，但是将函数定义为标题，然后在html文件末尾调用函数。

Answer 4

我处理这种情况的首选方法是a）仍然使用onload，因为这是浏览器通知您内容已完成加载的好方法;但是b）继续将代码分解为自己的函数，然后从onload处理程序中调用该函数。例如：

function myFunction(param1, param2) {
    // do your important stuff here
}

window.addEventListener('load', function(){
    myFunction('foo', 'bar');
}, false);

这样，您的功能在页面加载完成后才会被调用，但如果您愿意，也可以稍后单独调用它。

如何在没有onload的情况下调用函数

4 个答案: