Data Bind


グループ、メンバーの選択

\^o^/  メンバー =(^。^)=
,


メンバー名: ,

項目 朝食 昼食 夕食

 

 

ホーム へ     サンプルページ  Data Bind js  data_bind_js.htm

XMLファイルのデータを、ボタン選択・スクロールでテーブルに表示。    20人の一週間の献立(例)。       DHTML、XML。      データベースの 編集はテキストエディターなどで可。    Internet Explorer5.x〜対応。     コピー、編集し、簡単にWebで応用できまっ。

デモは、[ > ] [ >| ] や、メンバー名などのクリックで。    ※:データは、架空値。  互換表示・設定で。

 

< ご使用方法 >

 ・ ローカル(=PC)への保存は、data_bind_js.htmdata_bind.dtddata_bind.xml を右クリック、[対象をファイルに保存] - 【ファイルのダウンロード】、【ファイル名を付けて保存】 - <保存する場所>: ……、などで。    ※: 変わってしまったファイル名や、*.html 中のパスは要修正。

 ・ このDHTMLの実装方法は、data_bind_js.htm をテキストエディターで開き、ホームページ作成ソフトなどのHTML挿入/編集メニューなどを使って、新しいページ 1 や hogehoge.html(=任意の挿入先ファイル名) の、 <head> 〜 </head> の任意の行間に (*1)を、さらに <body> 〜 </body>の任意の行間に (*2) をペーストします。

 ・ 編集方法は、hogehoge.html を WordPad や SmipleTextなどのテキストエディター、あるいは ”FrontPage Express” などのホームページ制作ソフトのHTMLタグ挿入/編集メニュー で開き編集します。    下記の(例) (*1) と、(*2)を参考に太字部分の編集を任意に行います。     列数〔朝食、……など〕の変更は、data_bind.dtd の編集も。   ※: テキストエディターによる編集は、HP制作ソフトとの互換性の問題を生じません(HP制作ソフト間は少し生じる)。

 ・ 作動テストは、ローカル(PC)に保存し、 Internet Explorer 8.x〜 などで開いて。    更新の確認は、ie、Safariやサーバーからのキャッシュデーター更新を、目的のページを表示し ieで [F5]キー を押し最新データ読み込みで行います(≠再アクセス)。

 ・ アップロードや作動テストは、hogehoge.html と同じ階層〔ホルダー/ディレクトリー〕に、使用する画像、*.dtd、*.xml なども転送/配置し実施。  ※:別ディレクトリーに配置時は、*.html 中のパスは要修正。   FTPなどで変わったファイル名は要修正。    スクリプト構文中への改行混入は非作動原因。

 ・ 関連情報 : 色記号5〃6スタイルシートリファレンスホームページ開設入門。   Web DevelopmentWeb開発IE10 互換性クックブック〃開発者向けガイド、IE API リファレンスIE 開発 > HTMLとCSS開発ツールでサイトを修正スクリプト デバッグの概要HTMLとCSSのサポートCSSの改良点XML〃リファレンスDHTML

(*1)data_bind_js.htm (例)         挿入先の  <head> 〜 </head> の、 部分にペーストします。

 HTMLの編集方法   (*1) をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕   

シフトJIS使用(削除不可)

ieなどに表示するアイコンファイル名(削除可)

<style type= </style>は(削除可)
(*1)〜(*3)表タイトル背景

body 文字色 背景色 下線
ハイパーリンク 〃
表示済みの〃
マウスオーバー時の〃
クリック中の〃
フォント

 

リンクを新しいWinで開くを標準(削除可)※:target= いろいろ
同じフレーム=_self、ページ全体=_top、親フレーム=_parent
お気に入り、タスクバーに表示するページ名(≠ファイル名)

 

<meta http-equiv="Content-Type" content="text/html; charset=x-sjis">

<link REL="SHORTCUT ICON" href="favicon.ico">

<style type="text/css"><!--
.xxx0 { background: #F9F8F9 url('wttec.gif'); }
.xxx1 { background-color:#E3E0DC; }
.xxx2 { background-color:#FFFFFF; }
body { color:#000000; background: #F9F8F9 url('wttec.gif'); text-decoration:none; }
a:link { color:#3C0055; background-color:#FBFAFE; text-decoration:none; }
a:visited { color:#270037; background-color:#EDECEF; text-decoration:none; }
a:hover { color:#1F002E; background-color:#D2F3F4; text-decoration:underline; }
a:active { color:#1F002E; background-color:#F5FFD2; text-decoration:underline; }
font {
font-size:12px;
line-height:13px;
}
body,tr,td,form{ font-family:MS PGothic,MS Gothic,Verdana; font-size: 12px}
 --></style>

<base target="_blank">

<title>サンプルページ  Data Bind - XML js</title>

(*2) data_bind_js.htm (例)        挿入先の  <body> 〜 </body> の、 部分にペーストします。

 HTMLの編集方法   (*2)をテキストエディターで開き、下記↓のHTMLを挿入先ファイルにペースト、太字部分を編集し使用。
〔この列ペースト不要〕

背景 リンク 表示済みリンクンク アクティブリンクの各色(任意値)

 

 

選択実行背景色

 

 

選択実行背景色
ポイント背景色

 

 

 

 

背景色 

 

 

 

表幅  罫線色

左表サイズ 背景食 表タイトル 

内表サイズ左 右 

 

背景色  列タイトル

 

 

背景色 ボタン文字列

 

 

右表サイズ 背景食 表タイトル 

 

 

内表サイズ 

 

背景色  列タイトル 

 

<body bgcolor="#F8F5F5" link="#54006C" vlink="#62000D" alink="#00FFFF">

<!-- ★ ----------- ↓ この間をコピー&ペーストします。 ------------ -->
<!--webbot bot="HTMLMarkup" startspan -->
<h2>Data Bind</h2>

====  この間、説明を省略。  ====

//document.all.listTable.rows(1).cells(1).style.backgroundColor = "#FFFFA5";

====  この間、説明を省略。  ====

element = element.parentElement;

if (!(element.style.backgroundColor == "#FFFFA5"))
element.style.backgroundColor = "#E3ECB2";

}

function mouseOut() {

var element = window.event.srcElement;

while (element.tagName != "TD")
element = element.parentElement;

if (!(element.style.backgroundColor == "#FFFFA5"))
element.style.backgroundColor = "white";
}

====  この間、説明を省略。  ====

<!--webbot bot="HTMLMarkup" endspan -->

<!--webbot bot="HTMLMarkup" startspan -->
</p>
<table BORDER="0" WIDTH="
100%" RULES="cols" FRAME="above" bgcolor="#48006F" cellspacing="1">
<tr>
<td ALIGN="middle" VALIGN="top" WIDTH="30%" bgcolor="#E4EAF8"><b>
  
グループ、メンバーの選択<br>
</b>   <table ID="listTable" DATASRC="#xmldso" BORDER="1" CELLPADDING="5" DATAPAGESIZE="5" BGCOLOR="#FFFFFF" WIDTH="220" cellspacing="0" height="200">
<colgroup>
<col WIDTH="60"><col WIDTH="160">
</colgroup>
<thead>
<tr>
<th bgcolor="#DED9D3">\^o^/ </th>
<th bgcolor="
="#F3F1F5">メンバー (^ ^)</</th>
</tr>
</thead>
<tbody onclick=rowclick()>
<tr>
<td bgcolor="#F0EAEB"><font>
<input id="SelectB" Type="button" value="
データ表示" style="background:#4C8700;color:#FFFFFF;"></font> </td>
<td onMouseOver=mouseOver() onMouseOut=mouseOut()>
<span DATAFLD="LNAME"></span>, <span DATAFLD="FNAME"></span></td>
</tr>
</table>
<p><br>
<input ID="first" TYPE="button" VALUE="
はじめ" onClick="firstPage();" style="background:#008A9F;color:#FFFFFF;">
<input ID="prev" TYPE="button" VALUE="← 前ペーシ" onClick="prevPage();" style="background:#65009F;color:#FFE4EC;" >
<input ID="next" TYPE="button" VALUE="
次ページ →" onClick="nextPage();" style="background:#622C81;color:#FFE4EC;">
<input ID="last" TYPE="button" VALUE="
おしまい" onClick="lastPage();" style="background:#692968;color:#FFFFFF;"> </td>
<td ALIGN="middle" VALIGN="top" WIDTH="
70%" bgcolor="#F2EAFF">
<h4>
メンバー名: <span DATASRC="#xmldso" DATAFLD="LNAME"></span>,
<span DATASRC="#xmldso" DATAFLD="FNAME"></span></h4>
<table DATAFLD="COURSE" DATASRC="#xmldso" BORDER="1" CELLPADDING="5" BGCOLOR="#FFFFFF" WIDTH="530" cellspacing="0" height="450">
<colgroup>
<col WIDTH="40"><col WIDTH="100"><col WIDTH="100"
><col WIDTH="100">
</colgroup>
<thead>
<tr>
<th bgcolor="#E0DAD3">
項目</th>

====  この間、説明を省略。  ====

</td>
</tr>
</table>
<!--webbot bot="HTMLMarkup" endspan -->
<!-- ★ ----------- ↑ この間をコピー&ペーストします。 ------------ -->

 

(*3) data_bind.xml (例)        データの記述用のテキストファイル。  Wordpad などのテキストエディターなどで編集します。 

 XMLの編集方法   (*3)をテキストエディターで開き、下記↓の太字部分を編集し使用。
〔この列ペースト不要〕

 

 

1メンバーデータ範囲 :<STUDENT> から </STUDENT> まで。

氏名

 

データ 1(朝食)

データ 2(昼食)

データ 3(夕食)

項目

データ数は任意。 列数の変更は、data_bind.dtd の編集も。

以下、同様に追加、削除、変更します。

太字表示での省略あり。

<?xml version="1.0" encoding="shift_jis"?>

<!DOCTYPE REPORTCARD SYSTEM "data_bind.dtd">

<REPORTCARD>

<STUDENT>

<FNAME>奈美恵</FNAME>

<LNAME>安室</LNAME>

<COURSE>

<data1>藪蕎麦、ゴーヤチャンプルー、蕗炊き合わせ</data1>

<data2>鱧梅酢添え、梭子魚一夜干し、越の寒梅 1本</data2>

<data3>ドライマティーニ、焼き茄子、メバル 一夜干し</data3>

<item>日曜日</item>

</COURSE>

<COURSE>

<data1>焼き海苔、素麺、ゴーヤチャンプルー 1皿</data1>

<data2>鶏魚一夜干し、水餃子、サンテミリオン</data2>

====  この間、説明を省略。  ====

</STUDENT>

</REPORTCARD> 

< 補足 >    適時参照あれ!。

 ・ Wordpad によるHTMLソース(タグ)を見ながらの直接編集方法。