JavaScript を使用して動的に生成されるテーブルの詳細な説明
|
*ページを作成する: 2つの入力ボックスとボタン
コードは次のとおりです。
<html>
<ヘッド>
<title>テーブルを動的に生成する</title>
<スタイル タイプ = "text/css">
</スタイル>
</head>
<本文>
行: <input type="text" id="h"/><br/>
列: <input type="text" id="l"/><br/>
<input type="button" value="生成" onclick="add1()"/>
<div id="divv">
</div>
</本文>
<script type="text/javascript">
関数add1(){
/*
1. 入力行と列の値を取得します 2. テーブルを生成します - 行をループします - 行内のセルをループします 3. ページに表示します - innerHTML 属性を使用して、div 内にテーブル コードを設定します */
var h =document.getElementById("h").value;
//アラート(h);
var l =document.getElementById("l").value;
var tab = "<table border='1' bordercolor='red'>";
(var i=0;i<h;i++){
タブ += "<tr>";
(var j=0;j<l;j++){
タブ +="<td>aaaa</td>"
}
タブ +="</tr>"
}
タブ +="</table>";
var div1 = document.getElementById("divv");
div1.innerHTML = タブ;
}
</スクリプト>
</html>効果図のデモンストレーション:
要約するこの記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: Docker Gitlab+Jenkins+Harborは永続的なプラットフォーム運用を構築します
推薦する
Navicat PremiumはMySQLデータベースを操作します（SQL文を実行します）
1. Navicatの紹介1. Navicat とは何ですか? Navicat は強力な MySQ...
React Router 5.1.0 はページジャンプナビゲーションを実装するために useHistory を使用します
目次1. withRouterコンポーネントを使用する2. ルートタグを使用するReactRoute...
HTML メタタグの使用の概要 (推奨)
メタタグ機能METAタグは、HTMLタグのHEAD領域にある重要なタグです。文書の文字セット、使用言...
jQueryの競合問題を解決する方法
フロントエンド開発において、$ は jQuery の関数です。$ のパラメータが異なると、実装される...
mysqldump を使用して MySQL データをバックアップする方法
1. mysqldump の紹介mysqldump は、MySQL に付属する論理バックアップ ツー...
設計仕様に準拠した設計は良い設計でしょうか?
これまでの数年間、私はいわゆる「設計仕様」についてかなりの数の執筆やコンサルティングを行ってきました...
HTML ページの部分更新の実装コード
イベント応答の更新: 要求されたときのみ更新1. JS HTML DOM または jQuery を介...
ウェブページデザインのための4つの実践的なヒント
関連記事: Web コンテンツ ページを作成するための 9 つの実用的なヒント<br />...
ページ下部のフッターを修正する方法（複数の方法）
フロントエンド Web エンジニアとして、ページ効果を作成するときに次の現象に遭遇したことがあるはず...
https ウェブサイトを展開し、Nginx でアドレス書き換えを構成するための詳細な手順
Nginx は、高性能な Web サイト サーバーおよびリバース プロキシ サーバーであり、IMAP...
Vueシャトルボックスは上下の動きを実現します
この記事の例では、vueシャトルボックスを上下に動かすための具体的なコードを参考までに共有しています...
react setStateの詳細な説明
目次setState は同期ですか、それとも非同期ですか?カスタム合成イベントと React フック...
MySQL 5.7 をインストールした後にコマンドライン ウィンドウを開くとクラッシュする問題の解決方法
序文最近、MySQL 5.7 をインストールしましたが、問題が見つかりました。コマンド ライン ウィ...
IIS サーバーから apk ファイルをダウンロードする際の 404 エラーの解決策
最近、IIS をサーバーとして使用すると、apk ファイルがサーバーにアップロードされましたが、ダウ...
イメージの起動時にdocker runまたはdocker restartが自動的に終了する問題を解決します
コマンドを実行します: docker run --name centos8 -d centos /b...