長くなって申し訳ありませんが、同じ問題に関連する質問が 3 つあります。アドバイスをいただければ幸いです。
CSV ファイルを静的 HTML ファイル (または XML ファイル) に変換するスクリプトがあります。
たとえば、これは HTML ファイルです。
<div id="r1">
<div id="r1_hardware_name">Hard disk meter</div>
<div id="r1_software_name">Hard_disk_meter</div>
<div id="r1_description">Hard disk meter for temperature</div>
<div id="r1_size">64</div>
<div id="r1_status">Active</div>
<div id="r1_version">5</div>
<div id="r1_value">0x00001<div>
</div>
<div id="r2">
<div id="r2_hardware_name">CPU meter</div>
<div id="r2_software_name">CPU_meter</div>
<div id="r2_description">CPU meter for temperature</div>
<div id="r2_size">32</div>
<div id="r2_status">Active</div>
<div id="r2_version">1</div>
<div id="r2_value">0x00002<div>
</div>
<div id="r3">
<div id="r3_hardware_name">Memory meter</div>
<div id="r3_software_name">Memory_meter</div>
<div id="r3_description">Memory meter for temperature</div>
<div id="r3_size">64</div>
<div id="r3_status">Passive</div>
<div id="r3_version">2</div>
<div id="r3_value">0x00003<div>
</div>
HTML ページでは、これを 2 つの別々のテーブルに表示する必要があります。次のようなもの。CSSを使用して上記のhtmlに基づいてこれらのテーブルを作成することは可能ですか?
HW Name Size Status
Hard disk meter 64 active
CPU meter 32 active
Memory meter 64 passive
SW Name Version Value
Hard_disk_meter 5 0x00001
CPU_meter 1 0x00002
Memory_meter 2 0x00003
ページには、名前にリンクも必要です。ユーザーがいずれかのテーブルの「Hard disk Meter」名をクリックすると、次のような詳細テーブルが表示されます。
HW Name: Hard Disk Meter
SW Name: Hard_disk_meter
Description: Hard disk meter for temperature
Size: 64
Status: Active
Version: 5
Value: 0x00001
この部分は、ある種のJavaScriptを使用して実行できると思いました。ドキュメントの残りの部分を非表示にする単純なトグルでjQueryを使用し、別のCSSテーブル定義に添付された詳細テーブルを表示することを検討しています。これが最善の方法でしょうか？
最後の部分は、html ページ ビューをフィルター可能にすることです。ページの上部にフォームがあり、ユーザーは値の範囲 (開始/終了) を選択でき、結果はその範囲の上にある同じ 2 つのテーブルになります。また、ユーザーは行 ID (例: r1、r2、r3) を検索すると、上記の詳細テーブルが表示されます。このタイプの機能に近い唯一の例は tiddlywiki です。http://tiddlywiki.com/
しかし、おそらくjQueryを使用して、このフィルタリングと検索機能を実行する簡単な方法はありますか?