重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら>

【GOLF me!】初月無料お試し

phpでテキストタブ区切りのデータを読み込み、javascriptで絞り込みを行うページを作成しました。
初心者ですが、欲しいソースを組み合わせ、
何とか絞り込みは可能になったのですが、最初に全データが表示されます。

最初ページを開いたときにあらかじめ設定したデータのみを表示させておくことは可能でしょうか?




どの部分を表示すれば良いかわからず、
ソースは、phpの部分を表記させていただきました。

─php─

<form>
<?
$fn = 'books.txt';
$line = file($fn);
for ($a = 1; $a < count($line); $a++) {
$data = split("\t", $line[$a]);
for ($b = 0; $b < count($data); $b++) $array[$b][] = $data[$b];
}
$data = split("\t", $line[0]);,"
echo '<table id="SampleData"><thead><tr>
<th>日<br><br>
<label>
<select id="cell1" name="cell1" class="cellIndex0">
<option value="*">-</option>
<option value="上">上旬</option>
<option value="中">中旬</option>
<option value="下">下旬</option>
</select>
</label>
</th>
<th>title</th>
<th>IMG<br><br><br></th>
</tr>';
for ($a = 0; $a < count($line) - 1; $a++) {
echo '</thead><TR>';
for ($b = 0; $b < count($data); $b++) echo '<td>' . $array[$b][$a] . '</td>';
echo '</tr>';
}
echo '</TABLE>';
?>
</form>





こちらのサイトのように、最初は何も表示されない感じがよいです。
http://javascript.maxux.com/js104.htm
(こちらはプルダウンが一つしかなかったので、既存のものを編集しようと考えていました)


参考になるページでもかまいません、ご存知の方、どうかよろしくお願いいたします。



質問ばかりで申し訳ないですが、データ数が現段階で10,000を越します。
mysqlも考えてはいましたが、データはcsvやタブ区切りの方が早く作れることと、htmlタグもcsv内にあるので変換が大変かと思うのですが・・・csvやタブ区切りでは難しいでしょうか。

A 回答 (2件)

よくわかってませんが…



表示の1行がデータのセットになっていると解釈して、1行ごとに表示/非表示の制御ができればよいものとして、
>javascriptで絞り込みを行うページを作成しました。
という部分の処理方法がわからないので、そちらとも関係してしまうけれど、

例えば、CSSで
 #SampleData tbody tr { display:none; }
 #SampleData tbody tr.show { display:table-row; }
とでもしておいて、表示する行はclass="show"とする、とかではだめでしょうか?
(ご提示のソースだと<thead>が閉じていないので、↑のままではうまくいきませんが…)

ただし、IE系はdisplay:table-rowへの対応が不完全なようなので、ハックが必要みたい(未確認)。
なので、
 #SampleData tbody tr.hidden { display:none; }
として、最初の出力時に<tr class="hidden">で出力するほうが良いかも。
(表示する場合は、className=""などで)

この回答への補足

早速ご回答ありがとうございます!!
元のソースが長く省略もして、わからないなりですがかなりいじってましたので、
伝わりにくかったことこの上ないと思いますが・・・
こんなに丁寧にご回答いただけるとは思いませんでした!!

いただいた回答を参考にさせていただき、また後ほどお礼をさせていただきます!!

お礼ポイントをもっていないため、ポイントはないのですが・・・本当にごめんなさい・・・

補足日時:2011/01/05 10:45
    • good
    • 0
この回答へのお礼

できました!!望み通りできたので、かなりびっくりです
cssとは盲点でした…

色々調べた結果、データ量が多くてやはり1からデータベースを作ることになりそうですが…(泣

こちらはこちらで利用させていただきます!!

感謝します!!

お礼日時:2011/01/05 16:28

CSS で



tr[aria-hidden="true"] {
visibility: collapse;
}
とかして、

html で
<tr aria-hidden="true">~
とかして、

すくりぷとで
tr.setAttribute ('aria-hidden', 'false')
とかして、ひょうじするとか・・・
    • good
    • 0
この回答へのお礼

ありがとうございます!!

CSS・html・スクリプト、3つでの方法…すごい!!

3つのデータを関連させる方法がまだまだ理解できてなくて未熟なので、大変参考になりました!!

本当、感謝です!!

お礼日時:2011/01/07 13:30

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!