phpの絞り込みデータを最初から表示させない

質問

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やタブ区切りでは難しいでしょうか。

回答No.1

fujillin · ベストアンサー

よくわかってませんが…

表示の１行がデータのセットになっていると解釈して、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=""などで）

お礼

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

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

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

感謝します!!

補足

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

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

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

回答No.2

babu_baboo

CSS で

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

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

すくりぷとで
tr.setAttribute ('aria-hidden', 'false')
とかして、ひょうじするとか・・・

お礼

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

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

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

本当、感謝です!!