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は永続的なプラットフォーム運用を構築します
推薦する
Vueは透かし効果を簡単に実現します
序文： Vueプロジェクトで透かし効果を使用するには、コンテナを指定できます効果画像: 1. コンテ...
MySQL のロックに関する問題
ロックの分類:データ操作の粒度から:テーブルロック：操作時にテーブル全体がロックされます。行ロック:...
JavaScriptの再帰の詳細
目次1. 再帰とは何ですか? 2. 再帰を使って数学の問題を解く1. 1 * 2 * 3 * 4 …...
MySQLのインストールと設定方法のグラフィックチュートリアル（CentOS7）
1. システム環境[root@localhost ホーム]# cat /etc/redhat-re...
Vue 初心者ガイド: 環境の構築と開始方法
目次初期ビューVue開発環境の構築Vueインスタンスの作成Vue テンプレート構文Vue データバイ...
Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する
1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...
HTML文書の基本構造（Webページ作成の基礎知識）
HTMLの動作原理: 1. ローカル操作: ブラウザでhtmlファイルを開く2. リモートアクセス...
Linux サーバーに Python3 をインストールする 2 つの方法
最初の方法Alibaba Cloud および Baidu Cloud サーバーが利用可能です。 ！ ...
nacos が mysql に接続できない場合の解決策
理由nacos の pom が依存する mysql バージョンが、mysql バージョンと一致してい...
Vueはページの部分的なリフレッシュを実装します（ルータビューのページリフレッシュ）
Vue でprovide+inject組み合わせを使用するまず、App.vue を変更する必要があ...
Web ページ WB.ExecWB 制御印刷メソッド呼び出しの説明とパラメータの紹介
WebページWB.ExecWB制御印刷方法コードをコピーコードは次のとおりです。 <テーブルの...
JS ベースの Ajax 同時リクエスト制御を実装する方法
目次序文Ajax シリアルおよびパラレルAjaxの同時リクエスト制御のための2つのソリューションPr...
Windows 8 での ssh コマンドの使用記録
1. 仮想マシンとgit bashウィンドウを開き、接続の準備をします2. 仮想マシンでifconf...
DD DT DLタグの使用例
通常は <ul><li> タグを使用しますが、dd タグと dt タグも便利...
HTML テーブル マークアップ チュートリアル (28): セルの境界線の色属性 BORDERCOLOR
テーブルを美しくするために、セルごとに異なる境界線の色を設定できます。基本的な構文<TD 境界...