1. テーブルの動的ロード
1.まずHTMLにテーブルの追加位置のIDを設定します。
つまり、htmlのbodyタグ内にdivタグを記述し、このdiv内にテーブルを追加することを示します。次のように
<div id="tdl"><div>
2. JavaScript でテーブルを追加するステートメントを記述します。
現在の HTML ファイル内にある場合は、次のように <script> タグ内に記述されます。
次のようにコードをコピーします。
<script type="text/javascript" >
document.getElementById("tbl").innerHTML="<table><tr><td></td></tr></table>" //ここに追加されたテーブルは、独自のニーズに応じて作成できます
</script>
js ファイルをインポートする場合は、次のステートメントを js ファイルに直接記述します (test.js であると仮定します)。
次のようにコードをコピーします。
document.getElementById("tbl").innerHTML="<テーブル><tr><td></td></tr></table>"
次に、独自の HTML ファイルを導入します
次のようにコードをコピーします。
<script type="text/javascript" src="test.js"></script>
2. テーブル行を動的に追加する
1. まず、HTML でテーブル行の追加位置の ID を設定します。この位置は <tbody> 内にある必要があります (特に正確ではありませんが、テストに基づいてこの結論を得ました。他の方法がある場合は、メッセージを残してください。 、ありがとう）、次のように
次のようにコードをコピーします。
<テーブル>
<thead></thead>
<tfoot><tfoot> //tfoot と thead は tbody と一緒に使用されますが、私が書いているときは使用しなくても問題ありませんでした。
<tbody id="rows"></tbody>
</テーブル>
[/s/S ]*/n
2. JavaScript コンテンツでは、次のように、最初に行とセルを作成し、次に <.tbody> に行を追加する必要があります。
[コード]
row=document.createElement("tr"); //行を作成します
td1=document.createElement("tr"); //セルを作成
td1.appendChild(document.createTextNode("content")); // セルにコンテンツを追加します
row.appendChild(td1); //行にセルを追加します。
document.getElementById("rows").append(row); //<tbody> に行を追加します。
3. 私の小さな発見 (他の人はすでに知っているかもしれません...)
1. 私は自分でテストを行い、HTML に <table id="tdl'></table> を記述し、javascript に document.getElementById("tdl").innerHTML="<tr><td></td> を記述しました。 tr>"、これを書いた後にテストしてみると、HTML内のテーブルの行は追加されません。
2. 上記のテストが完了した後、html に <table><tr><td id="t'><td><tr></table> を記述し、document.getElementById("t in javascript " ).innerHTML="<p>content</p>" の場合、テストでコンテンツを追加できます。
3. 考察: 上記の 2 つのテストからどのような結論が得られるでしょうか? innerHTML を通じて直接追加できるタグの種類はまだわかりません。