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は永続的なプラットフォーム運用を構築します
推薦する
Dreamweaver8を使用してウェブサイトのファイルをチェックして整理する方法
Dreamweaver8 を使用して独自の Web サイトを作成する目的は何ですか?インターネットに...
重複したMySQLレコードを現場でチェックし、処理する実践的な記録
目次序文分析するデータ合計繰り返し率どこにあるかと持っているかの違い要約する序文私はソフトウェアの導...
一般的な Nginx のテクニックと例の概要
1. 複数サーバーの優先順位たとえば、各サーバー ブロックがポート 80 をリッスンする場合、www...
VScode リモート SSH リモート編集とデバッグコード
Visual Studio Code の最新の Insider バージョンには、コードのリモート デ...
TomcatはXMLを解析し、リフレクションを通じてオブジェクトを作成します。
次のサンプル コードでは、Tomcat が XML を解析し、リフレクションを通じてオブジェクトを作...
Vueカスタム命令の詳細な説明
目次Vueカスタムディレクティブカスタムディレクティブフック機能出力関連属性アプリケーション例要約す...
MySQL 主キー ID を生成する方法 (自己増分、一意、不規則)
目次1. uuid関数を使用して、一意かつ不規則な主キーIDを生成します。 2. idの自動成長1....
JQueryはアニメーション効果の非表示と表示を実装します
この記事では、アニメーション効果の非表示と表示を実現するためのJQueryの具体的なコードを参考まで...
DockerでJenkinsをインストールし、初期プラグインのインストール失敗の問題を解決する
Jenkins をインストールした後、プラグインの初期ダウンロードが常に失敗し、インストールが失敗し...
アニメーションとトランジションの違い
CSS3アニメーションとJSアニメーションの違いJSはフレームアニメーションを実装しますCSS3はト...
Node.js の非同期イテレータの詳細な説明
目次序文非同期イテレータとは何ですか?非同期イテレータストリームとしてページング機能を備えたAPIの...
Windows プラットフォーム構成 5.7 バージョン + MySQL データベース サービス
ルートユーザーのパスワードを初期化するプロセスと、よくある2つの問題の解決策が含まれています。 1....
HTML ページはダーク モードの実装をサポートします
2019年から、AndroidとiOSの両方のプラットフォームでダークモードが使用され始めました。も...
CSS のマージンの崩壊問題を解決する方法
まず、マージン崩壊が発生する 3 つの状況を見てみましょう。 1. 隣接する 2 つのブロックレベル...
Vue3 でサードパーティのコンポーネントライブラリをオンデマンドでロードする方法
序文Element Plus を例に、コンポーネントとスタイルのオンデマンド読み込みを構成します。環...