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>

関数に名前を付けてオンロードを取り除き、頭のスクリプトから関数を呼び出そうとしましたが、うまくいきません。

4

4 に答える 4

2

html の divのscript 後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

このような状況に対処するための私の好みの方法は、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 に答える
0

質問を完全に理解しているかどうかはわかりませんが、関数をヘッダーに定義してから、html ファイルの最後で関数を呼び出します。

于 2013-08-29T20:34:48.497 に答える