0

我试图找出一种从头部动态写入表格的方法，并遇到了这个示例代码。问题是它使用'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 并从头部的脚本中调用该函数，但这不起作用。

4

4 回答 4

2

您必须在 html 中的 divscript 之后function foobar()放置才能使用，然后再编写foobar();

这是用于调用函数，但onload=function()也可以在<head>标签中使用。原因是如果它是页面按顺序呈现的功能，并且<div>如果它在头部，则在页面到达它的点将不存在，但是onload意味着在页面完成加载之后。

于 2013-08-29T20:27:44.143 回答
1

这并不难。但首先你必须隔离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/

于 2013-08-29T20:35:11.143 回答
0

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

于 2013-08-29T20:34:48.497 回答
0

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

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

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

这样，您的函数在页面完成加载之前仍然不会被调用，但如果您愿意，您也可以稍后单独调用它。

于 2013-08-29T23:46:31.473 回答