ホームページ >ウェブフロントエンド >jsチュートリアル >javascript_javascript スキルでテーブルを動的にロードし、テーブル行を動的に追加する方法

javascript_javascript スキルでテーブルを動的にロードし、テーブル行を動的に追加する方法

WBOYオリジナル: 2016-05-16 17:12:101848ブラウズ

1. テーブルを動的に読み込みます

1. まずhtmlでテーブルの追加位置のIDを設定します

つまり、bodyタグ内にdivタグを記述しますこの div 内に追加されるテーブルを示す HTML 。以下のように

にテーブルを追加するステートメントを記述します。現在の HTML ファイルを

のように <script> タグ内に記述します。コード <a style="CURSOR: pointer" data="74836" class="copybut" id="copybut74836" onclick="doCopy('code74836')"><u></u> をコピーします。コードは次のとおりです。 </a></span> </div>&lt ;script type="text/javascript" > <div class="codebody" id="code74836"> <br>document.getElementById("tbl").innerHTML="<table><tr><td&gt ;</td></tr&gt ;</table>" //ここに追加されるテーブルは、必要に応じて作成できます <br><br></script>

js ファイルを導入した場合は、js ファイル (test.js とする) に次のステートメントを直接記述します

コードをコピーしますコードは次のとおりです。

document .getElementById("tbl").innerHTML="< /tr>

次に、独自の HTML ファイルを導入します

コードをコピーコードは次のとおりです:

2. テーブルの行を動的に追加します
1. HTML で最初にテーブルの行の追加位置の ID を設定します (特に正確ではありません)。私のテストに基づいてこの結論が得られました。他の方法がある場合は、メッセージを残してください、ありがとう)、次のように

コードをコピーコードは次のとおりです。

thead は tbody と組み合わせて使用されますが、私が書いているときは使用しなくても問題ありませんでした。

[sS ]*n
2.まず行とセルを作成するには、次のように <.tbody> に行を追加します
[code]
row=document.createElement("tr") //行を作成します

td1 =document.createElement("tr"); //セルを作成します

td1.appendChild(document.createTextNode("content")) //セル

行にコンテンツを追加します。 td1); // 行にセルを追加します

document.getElementById("rows").append(row); // 行を

3. 私の小さな発見 (おそらく他の人はすでに知っているでしょう...)

1.

1. HTML ; に
2. 上記のテストが完了したら、HTML を変更して

3. 考察: 上記の 2 つのテストからどのような結論が導き出せるか、まだまとめ方がわかりませんが、innerHTML を通じてどのような種類のタグを追加できるでしょうか。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：asm.jsの使い方サンプルコード_基礎知識次の記事：asm.jsの使い方サンプルコード_基礎知識

続きを見る

javascript_javascript スキルでテーブルを動的にロードし、テーブル行を動的に追加する方法

関連記事