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は永続的なプラットフォーム運用を構築します
推薦する
JS for ループで setTimeout を使用する 4 つのソリューション
目次概要解決策 1: クロージャ解決策2: 構造を分割する解決策3：解決策4: setTimeout...
オブジェクトのプロパティを反復処理する際の TypeScript の問題
目次1. 問題2. 解決策1. オブジェクトをanyとして宣言する2. オブジェクトのインターフェー...
Linux trコマンドの使い方
01. コマンドの概要tr コマンドは、標準入力からの文字を置換、圧縮、削除できます。ある文字セット...
Vueライフサイクル機能の詳細な説明
目次ライフサイクル関数一般的なライフサイクルフックVue のインスタンス破棄について:要約するライフ...
Linux（中心OS7）は、Java Webプロジェクトの実行環境を構築するためにJDK、Tomcat、MySQLをインストールします。
1. JDKをインストールする1. 古いバージョンまたはシステム独自のJDKをアンインストールする...
mysql 8.0.20 winx64.zip 圧縮版のインストールと設定方法のグラフィックチュートリアル
mysql 8.0.20 winx64.zip圧縮版のインストールチュートリアルは以下のように記録さ...
Mysql 主キー UUID と自動増分主キーの違いと利点と欠点
導入私はしばらくの間、postgresql データベースを使用していました。クラウドに移行した後、自...
高品質なJavaScriptコードの書き方
目次1. 読みやすいコード1. 統一コード形式2. マジックナンバーを削除する3. 単一機能原則2....
Tomcat のメモリ構成の正しい姿勢についての簡単な説明
1. 背景多くのブログや記事を読みましたが、JVM のメモリ割り当て方法に関する包括的な記事は見つか...
親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明
基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...
Vue が Ref を使用してレベル間でコンポーネントを取得する手順
VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...
Nginx+SpringBoot による負荷分散の実装例
負荷分散の概要Nginx の負荷分散実装を紹介する前に、負荷分散の分類について簡単に説明します。負荷...
新しく作成された MySQL ユーザーの % には localhost が含まれていますか?
通常の説明%はどのクライアントでも接続できることを意味しますlocalhostはローカルコンピュータ...
docker-maven-pluginを使用してデプロイメントを自動化する方法を説明します
1. docker-maven-pluginの紹介私たちの継続的インテグレーションプロセスでは、プロ...
MySQLリモート接続失敗の解決策
以前、MySQLがローカルでは接続できるのにリモートでは接続できないという問題に遭遇したことがありま...