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は永続的なプラットフォーム運用を構築します
推薦する
nginx設定ファイルの解釈の詳細な説明
nginx 設定ファイルは主に 4 つの部分に分かれています。 main{#(グローバル設定) ht...
Linux環境でよく使われるMySQLコマンドの紹介
mysql コマンドを入力します: mysql -u+(ユーザー名) -p+(パスワード) mysq...
Vueカスタムv-has命令、ボタン権限判定の手順
目次アプリケーションシナリオ簡単に言えば、カスタム指示基本概念グローバルカスタマイズローカルカスタマ...
Vue コードの読みやすさに関するいくつかの提案
目次1. コンポーネントをうまく活用してコードを整理する1. UIコンポーネントを抽出する2. モジ...
Vueでスワイパープラグインを使用する際の問題を解決する
デモを作成するときにこのプラグインを使用していくつか問題が発生したため、プラグインの使用方法といくつ...
フロントエンドフレームワーク Vue における親子コンポーネントデータの双方向バインディングの実装
目次1. 親コンポーネントと子コンポーネント間の一方向の値転送1. 親から子への値の受け渡し2. 子...
ライフゲームの JavaScript 実装
目次コンセプト紹介論理的ルール完全なコード主な実装コンセプト紹介セルオートマトンとは、コンピュータの...
mysql 5.7.18 winx64 無料インストール設定方法
1. ダウンロード2. 減圧3. パス環境変数を追加し、mysqlが配置されているbinディレクトリ...
JavaScriptアップロードファイル制限パラメータケースの詳細な説明
プロジェクトシナリオ: 1. アップロードファイルの制限関数： 1. フロントエンド操作による異常な...
MySQL のソートとページング (order by と limit) と既存の落とし穴
並べ替えクエリ (order by)電子商取引の場合: 今日完了したすべての注文を表示し、取引金額に...
ウェブのさまざまなフロントエンド印刷方法: CSS はウェブページの印刷スタイルを制御します
CSS は Web ページの印刷スタイルを制御します。 CSS を使用して印刷スタイルを制御します。...
Vue の get リクエストと post リクエストの違いのまとめ
このチュートリアルの動作環境: Windows 7 システム、vue 2.9.6 バージョン、DEL...
Docker を使用して OpenLDAP+phpLDAPadmin 統合ユーザー認証を構築する方法
1. 背景LDAP を使用して、操作および保守に関連するユーザー名とパスワードを集中管理します。 1...
MySql マスタースレーブレプリケーションの実装原理と構成
データベースの読み取りと書き込みの分離は、トラフィック量の多い大規模システムやインターネット アプリ...
nohup /dev/null 2>&1 の使い方の詳しい説明
nohup コマンド: プロセスを実行しており、アカウントからログアウトしてもプロセスが終了しないと...