
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ベストアンサー
- 回答日時:
よくわかってませんが…
表示の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=""などで)
この回答への補足
早速ご回答ありがとうございます!!
元のソースが長く省略もして、わからないなりですがかなりいじってましたので、
伝わりにくかったことこの上ないと思いますが・・・
こんなに丁寧にご回答いただけるとは思いませんでした!!
いただいた回答を参考にさせていただき、また後ほどお礼をさせていただきます!!
お礼ポイントをもっていないため、ポイントはないのですが・・・本当にごめんなさい・・・
できました!!望み通りできたので、かなりびっくりです
cssとは盲点でした…
色々調べた結果、データ量が多くてやはり1からデータベースを作ることになりそうですが…(泣
こちらはこちらで利用させていただきます!!
感謝します!!
No.2
- 回答日時:
CSS で
tr[aria-hidden="true"] {
visibility: collapse;
}
とかして、
html で
<tr aria-hidden="true">~
とかして、
すくりぷとで
tr.setAttribute ('aria-hidden', 'false')
とかして、ひょうじするとか・・・
ありがとうございます!!
CSS・html・スクリプト、3つでの方法…すごい!!
3つのデータを関連させる方法がまだまだ理解できてなくて未熟なので、大変参考になりました!!
本当、感謝です!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
selectを変更不可にしたい
-
<input>の選択肢をプルダウンメ...
-
ラジオボタンの選択に応じてプ...
-
プルダウン選択を変更すると、...
-
VScodeの使い方
-
return trueとreturn falseの用...
-
Selectボックスの幅を自動で広...
-
onchangeイベントを強制的に発...
-
RegularExpressionValidatorの...
-
クリックされた罫表セルの行番...
-
チェックボックス付きのテーブ...
-
ASP.NETでNAME属性を固定にしたい
-
JavaScript ログアウト処理
-
【jQuery】input nameの文字列...
-
sessionの値でボタンを活性・非...
-
ラジオボタンにタブインデック...
-
submitした値を返したい
-
JavaScriptによる自動計算フォ...
-
setIntervalの間隔を途中で変更...
-
プルダウン 項目が多いので先頭...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<input>の選択肢をプルダウンメ...
-
javascriptでoptionタグを削除...
-
プルダウン選択を変更すると、...
-
2段階プルダウンで1段階目の選...
-
セレクトボックスで配列を呼び...
-
ラジオボタンとプルダウンを連...
-
【JavaScript】プルダウンで数...
-
スマホのフォームでのselect複...
-
二つのセレクトボックス間での...
-
3つの連動したプルダウンメニュ...
-
プルダウンを選択していないと...
-
2つのプルダウンメニューで、同...
-
selectを変更不可にしたい
-
Selectボックスの一覧表示方法
-
webページの一部のみの更新につ...
-
<select> をmultiple にしてい...
-
同じ名前のセレクトがある場合...
-
javascriptでセレクトボックス...
-
コードレビューをお願いします。
-
selectタグで日付を生成
おすすめ情報