![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
HTMLで今、簡単な表を作成することを学んだのですが、今度はDBからデータを持ってきてそれを表にして出力するようにしたいのですが、まず、何からやったらいいのか分かりません。
データはDBにあるものすべてを表示し、それぞれのデータひとつひとつに修正ボタンと削除ボタンを付けたいと思います。
よろしくお願いします。
例 (作りたいものを再現してみました)
|ーーーーーーーーーーーーーーー|
|名前 |番号 | |
|ーーーーーーーーーーーーーーー|
|佐藤 |1 |修正 |削除 |
|ーーーーーーーーーーーーーーー|
|田中 |2 |修正 |削除 |
|ーーーーーーーーーーーーーーー|
No.3ベストアンサー
- 回答日時:
質問文からは、どのような形態を想定しているのか判断がつかなかったので、思いつく限りで回答します。
案1. HTML に埋め込んだ JS スクリプトから、ブラウザの DB 機能を使用する
HTML ファイルを Web サーバーを介さずにブラウザ表示させる形態を想定
https://developer.mozilla.org/ja/docs/Web/API/We …
https://developer.mozilla.org/ja/docs/Web/API/In …
案2. HTML に埋め込んだ JS スクリプトから、クラウド型 DB サービスを使用する
Web サーバーに格納した HTML ファイルを単純表示させる形態を想定
使用する前にサービスの契約や設定が必要
https://cloud.google.com/firestore/
案3. プログラムから、サーバー上で動作させている DB ミドルウェアへ接続し使用する
HTML を生成するプログラムをサーバー機に配備し表示させる形態を想定
自前サーバーならミドルウェアの導入と環境設定が必要
https://docs.mongodb.com/guides/
https://dev.mysql.com/doc/refman/5.6/ja/
クラウド型ならオプション契約や設定が必要
https://manual.sakura.ad.jp/cloud/appliance/data …
実装例として、案1 で簡単に HTML を組んでみました。
<script>
var storage = window.localStorage;
const W = (mems)=>storage.setItem("members", JSON.stringify(mems));
const R = ()=>JSON.parse(storage.getItem('members'));
window.onload = function(event){
W([ {no:1,name:"楊"}, {no:2,name:"村井"}, {no:3,name:"戸田"} ]);
var members = R();
var rows = members.map(m=>"<tr><td>"+m.name+"<td>"+m.no+"<td><button>x</button>").join("\n");
var table = "<table border><thead><tr><th>name<th>no<th>-<tbody>"+rows+"</table>";
document.querySelector('#members').innerHTML = table;
}
</script>
<section id=members></section>
No.2
- 回答日時:
HTMLだけではできません。
DBにアクセスできるプログラム言語を使って、DBにアクセスするためのSQL言語をその言語内で記述します。
なお、DBを構築するための操作知識も必要となります。
さらに、Webサーバ関連の知識も必要です。
また、JavaScriptも必須になりそうですね。
それから、CGIを使う場合も同様です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- その他(データベース) pythonでsqlight勉強中、クエリー結果の利用法教えて下さい 1 2022/04/28 20:38
- Excel(エクセル) 重複したデータ(空白は除く)のVBA表記について 4 2022/08/15 07:28
- Ruby pandasでsqlite3にテーブル作成・追加・読み出しでindexの取り扱い方教えてください 5 2023/03/08 09:57
- Access(アクセス) Access 登録ボタンからサブフォームの更新 1 2022/07/22 10:23
- SQL Server DBのテーブルの設計ができず困っています。 2 2023/06/29 16:43
- その他(ブラウザ) IE・edgeで日増しに観られるサイトが減ってくる。 1 2022/10/04 22:40
- Word(ワード) wordの修正履歴について 3 2023/01/05 23:50
- Access(アクセス) docmd.gotorecordを起動するには 5 2022/06/17 15:20
- IT・エンジニアリング ドメイン駆動設計の値オブジェクトについて質問 1 2023/05/13 02:50
- Visual Basic(VBA) Excel VBAのリストボックスの値を他のフォームに反映させる方法を教えてください。 2 2023/07/14 14:06
このQ&Aを見た人はこんなQ&Aも見ています
-
性格の違いは生まれた順番で決まる?長男長女・中間子・末っ子・一人っ子の性格の傾向
同じ環境で生まれ育っても、生まれ順で性格は違うものなのだろうか。家庭教育研究家の田宮由美さんに教えてもらった。
-
htmlコードで書かれた表にphpでdbから取得した値を挿入したい
MySQL
-
htmlでテーブル内にテキストボックスを作りたいのですが・・・
HTML・CSS
-
MySQLのDB内容をWEB上に表示するには、どうしたらいいですか?
MySQL
-
-
4
プルダウンメニューにDBの内容を表示させる
PHP
-
5
HTMLとデータベースの連携
HTML・CSS
-
6
テーブルタグの中にdivを含めてはダメ?
HTML・CSS
-
7
HTMLの値の渡し方について質問です。 HTMLで値を今の画面から次の画面に渡すにはどういう文を使う
HTML・CSS
-
8
htmlファイルを開いた時の画面サイズ指定の方法
JavaScript
-
9
ACCESSのデータをWebブラウザで表示(イントラ環境)
その他(データベース)
-
10
htmlでfor文使えますか?
HTML・CSS
-
11
htmlの中にexcelが埋め込むにはどうすればいいのですか
HTML・CSS
-
12
PHPでDBからデータを抽出してHTMLで表示
PHP
-
13
DBの値をチェックボックスに反映させたい
PHP
-
14
phpで複数の検索語を検索対象にしたい
PHP
-
15
PHP ボタンが押されたら処理を実行する
PHP
関連するカテゴリからQ&Aを探す
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
saved from url=(0013)abou
-
HTMLでDBからデータを表形式で...
-
ローカルでのhtmlチェックにつ...
-
教えてつかぁさい。HPのレイ...
-
Ajaxはサーバ介さないとxmlファ...
-
ローカルファイル(mp3)の再生
-
【JavaScript】confirmのボタン...
-
呼び出し元のURLを知りたいのです
-
ブラウザ閉じたらサーバー処理...
-
C#でUDP通信
-
sleepの負荷
-
Ajaxでデータベース更新
-
Ajax、PHP、MySQLでDBからデー...
-
【JavaScript】PS3で一部の構文...
-
DirectXとOpenGLはどちらが動作...
-
画面遷移しないで画像の追加を...
-
URLの中に&があると&に変...
-
cakephp2とsmartyの表示が遅い
-
ASP.NET 動的に行を増やすTable
-
PHP内でJavaScriptの処理は可能?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
HTMLでDBからデータを表形式で...
-
saved from url=(0013)abou
-
リンクを押すとEXEファイルを実...
-
ローカルファイル(mp3)の再生
-
subversionでコミットしたらftp...
-
ローカル用HTMLファイルの安全...
-
テーブルで作った表をボタン操...
-
Flickity で画像にリンクを貼る...
-
インターネット上のファイルサ...
-
Webスクレイピング Google Cola...
-
ハローワークインターネットサ...
-
ローカルでのhtmlチェックにつ...
-
HTMLファイルにテキストファイ...
-
ワードプレスのテンプレートの変更
-
作成したHTMLフォーム画面の記...
-
サーバー側でのサイト表示がお...
-
制作したサイトが文字化けして...
-
Windowsサーバーで動いている無...
-
html化とは
-
imageタグの画像データを取得す...
おすすめ情報