⊗jsPmPrTCF 469 of 505 menu

HTMLテーブルの逐次的な生成

以下のような空のHTMLテーブルがあるとします:

<table id="table"></table>

このテーブルをセルで埋め、それらのセルに1から9までの数字を順番に入れていきましょう。以下に期待される結果の例を示します:

<table id="table"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> <td>9</td> </tr> </table>

実装を始めましょう。

まずは、'x'で埋められた3×3のテーブルを単純に作成します:

let table = document.querySelector('#table'); for (let i = 0; i < 3; i++) { let tr = document.createElement('tr'); for (let i = 0; i < 3; i++) { let td = document.createElement('td'); td.textContent = 'x'; tr.appendChild(td); } table.appendChild(tr); }

次に、'x'の代わりに、セルに数字を昇順で書き込むように変更します。

そのためには、内部ループの各イテレーションで連続的に値を増加させる別のカウンターを導入する必要があります。以下のようになります:

let table = document.querySelector('#table'); let k = 1; // カウンターの初期値 for (let i = 0; i < 3; i++) { let tr = document.createElement('tr'); for (let i = 0; i < 3; i++) { let td = document.createElement('td'); td.textContent = k; // カウンターをセルに書き込む k++; // カウンターを増加させる tr.appendChild(td); } table.appendChild(tr); }

5行×5列のHTMLテーブルを表示し、そのセルに1から25までの数字が順番に入るようにしてください。

前のタスクを修正して、テーブルのセルに2から50までの偶数が書き込まれるようにしてください。

日本語
AfrikaansAzərbaycanБългарскиবাংলাБеларускаяČeštinaDanskDeutschΕλληνικάEnglishEspañolEestiSuomiFrançaisहिन्दीMagyarՀայերենIndonesiaItalianoქართულიҚазақ한국어КыргызчаLietuviųLatviešuМакедонскиMelayuမြန်မာNederlandsNorskPolskiPortuguêsRomânăРусскийසිංහලSlovenčinaSlovenščinaShqipСрпскиSrpskiSvenskaKiswahiliТоҷикӣไทยTürkmenTürkçeЎзбекOʻzbekTiếng Việt
当サイトでは、サイトの動作、分析、パーソナライゼーションのためにクッキーを使用しています。 データ処理はプライバシーポリシーに従って行われます。
すべて受け入れる 設定 拒否