楽しい英会話の世界 by Kagoshima artists.

鹿児島在住の元英語教師が、親子の会話やお仕事で使う英語、方言や日本語学研究をご紹介。よみがなには、カタカナを使用します。

WEB画面の表をクリックしたら、テキストに値を移す方法

2018-08-11 12:47:01 | プログラム、情報処理
みなさんは、WEB画面構築ノウハウを勉強していて、すでにご存知かも知れないです。
私は、九州にいた間にシステムエンジニアの仕事をする機会を失い、勉強していたつもりだったけど、現場の仕事をしていると、様々な進化を感じています。

これからご紹介するテクニックは私が今まで知らなかった機能です。それはもしかしたら、10年前にはまだ存在しなかった技術かも知れません。
簡単なプログラム構成なので、便利です。
ちょっとしたシュミレーションをしたい時、試算したいとき、サーバーやデータベースやネットワークを経由しなくても表の中身を使って動作するので、環境が構築している前には重宝します。

ここで、WEB画面の表とは〈Table〉~〈/Table〉で構成する表のことを、指しています。
読み:てぇーぶる・たぐ

そして、WEB画面の表をクリックしたら、テキストに値を移す、の「テキスト」とは〈INPUT〉~〈/INPUT〉で構成するテキストボックスを、指しています。
読み:いん・ぷっと・たぐ


ポイントは表にもテキストボックスにも、ID(読み:あい・でぃ)を付ける(読み:つける)ことです。

例えば、WEB画面を表示した時(Loadするとき/ロードするとき)に初期値(読み:しょき・ち)として1行目を自動的に選択して1列目をテキストボックスに移送(読み:いそう)したい場合は次の通り。
ただし、1行目は列見出し行で明細行は2行目から開始とします。


WEB画面構築プログラム(読み:うぇぶ・がめん・こうちく)はこちら
function(){
document.myForm.myID.value=$('#target-table tr').eq(1).children('td').eq(0).text();
}

これは、javascript(読み:じゃば・すくりぷと)というプログラム言語です。

HTMLタグ(読み:えいち・てぃ・えむ・える・たぐ)は、次のように書きます。
全角の〈と〉は、半角の<と>に変えてご利用ください。

<html>
<head>
<title>kotoritobuの仕事</title>
<script>
<--
ここに、javascriptプログラムを書きます。
-->
</script>
</head>
<body>
〈form name="myForm"〉
〈table〉
〈tr id="target-table">
〈td〉no〈/td〉〈td〉name〈/td〉〈/tr〉
〈tr id="target-table"〉
〈td〉1〈/td〉〈td〉みかん〈/td〉〈/tr〉
〈tr id="target-table"〉
〈td〉2〈/td〉〈td〉バナナ〈/td〉〈/tr〉
〈/table〉
<input type="text" id="myID">
</form>
</body>
</html>
By kotoritobu
ジャンル:
WEBデザイン
コメント   この記事についてブログを書く
« WEB画面の好きなところ | トップ | 本人がいらないって言うんだ... »
最近の画像もっと見る

コメントを投稿

プログラム、情報処理」カテゴリの最新記事