データバインド機能でand検索をしたいので方法をご教授ください
- データバインド機能を使用して複数項目のドロップダウンメニューから選択した条件でand検索をする方法を教えてください。
- また、検索結果をテーブルとして表示し、テーブルのヘッダーのみを最初に表示し、オールクリアボタンをクリックするとテーブルヘッダーのみを再表示する方法も教えてください。
- 初心者のため、ソースコードが理解できず困っています。以下にソースコードを添付します。
- ベストアンサー
データバインド機能でand検索をしたいので方法をご教授ください
よろしくお願いいたします。 現在、データバインド機能を使用して検索画面を作っております。 javascriptは初心者なので手探りで作っておりますが、 イメージとしましては (1)複数項目をドロップダウンメニューで選択しアンド条件で絞込みます。 (2)その結果をテーブルとして表示したいのです。 (3)テーブルは最初から表示されていなくて、テーブルヘッダーの部分だけを表示させておきたい。 (4)オールクリアのボタンをクリックするとまたもとの状態のテーブルヘッダーだけを表示する。 といった感じです。 初心者なのでまったくわかりません。 ソースは以下になります。 ご教授よろしくお願いいたします。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS"> <TITLE>データバインドル</TITLE> <script language="javascript"> <!-- function ShowTable() { //selectにて選択された値を取得します。 var nIndex; nIndex = document.frmSample.selNumber.value; //データにフィルタをかけます。 objDataBind.FilterValue=nIndex; objDataBind.FilterColumn="num"; objDataBind.FilterCriterion="="; objDataBind.Reset(); } //--> </script> </HEAD> <BODY> <FORM name="frmSample"> <SELECT NAME="selNumber"> <OPTION SELECTED VALUE="1">1 <OPTION VALUE="2">2 <OPTION VALUE="3">3 <OPTION VALUE="4">4 </SELECT> <INPUT TYPE="button" value="データを表示" onClick="ShowTable()"> <SELECT NAME="seltitle"> <OPTION VALUE="うさぎ">うさぎ <OPTION VALUE="かめ">かめ <OPTION VALUE="ねこ">ねこ <OPTION VALUE="いぬ">いぬ </SELECT> <INPUT TYPE="button" value="データを表示" onClick="ShowTable()"> </FORM> <OBJECT classid="clsid:333c7bc4-460f-11d0-bc04-0080c7055a83" id="objDataBind" height="0" width="0"> <PARAM NAME="DataURL" VALUE="base.csv"> <PARAM NAME="UseHeader" VALUE="true"> <PARAM NAME="FieldDelim" VALUE=","> <PARAM NAME="CharSet" VALUE="shift_jis"> </OBJECT> <TABLE DATASRC="#objDataBind" BORDER="1" ID="tblData"> <thead> <TR> <Th><div>番号</div></Th> <Th><div>タイトル</div></Th> </TR> </thead> <TBODY> <TR> <TD><DIV datafld="num"></DIV></TD> <TD><DIV datafld="title"></DIV></TD> </TR> </TBODY> </TABLE> </BODY> </HTML> ｃｓｖファイルは以下のとおりです。 num,title 1,うさぎ 2,かめ 3,ネコ 4,犬 5,かめ
- mokogem
- お礼率100% (2/2)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
すみません、言葉が少し足りてなかったかもしれないです。 //データにフィルタをかけます。 以降の４行を消してから と書く予定でした・・・ ↓こんな感じに（目的の動作が分からないので例として適切か分かりませんが応用してください） function ShowTable() { //selectにて選択された値を取得します。 var nIndex,tIndex; nIndex = document.frmSample.selNumber.value; tIndex = document.frmSample.seltitle.value; //データにフィルタをかけます。 objDataBind.Filter="num=" + nIndex + "&title=" + tIndex; objDataBind.reset(); } あと、これでもだめなら、私も違いがよくわかってませんが objDataBind.object.Filter="num=" + nIndex + "&title=" + tIndex; objDataBind.object.reset(); とかも試してください。
その他の回答 (1)
- 15mm
- ベストアンサー率65% (65/100)
(1)(2) numが重複しないのであれば、numとtitle両方をフィルタする必要は無いです。 ・objDataBind.Filter="num=1&title=うさぎ";objDataBind.reset(); ・objDataBind.Filter="num>1&title=*め";objDataBind.reset(); とかがうまく動作してくれたらこれを参考にしてみてください。 (3) <PARAM NAME="Filter" VALUE="num<0">とか、絶対にこの条件ではヒットする項目は無いというフィルタを指定 (4) (3)のようなフィルタ指定をすれば何も表示されない objDataBind.Filter="num<0";objDataBind.reset(); ＩＥ標準のデータバインドのようなので、参考ＵＲＬも覗いてみてください。 http://www.makoto3.net/document/databind/databind_all.html 余計なお世話ですが、 <script type="text/javascript">を推奨します。 <TITLE>データバインドル</TITLE>←一文字多い？
お礼
15mm様 わかりやすいご回答を下さりありがとうございました。 早速試してみましたが私の記述の仕方が悪いのか、テーブルヘッダーのみ表示はされたのですが、フィルタをかけても何もヒットされませんでした。 頂いた参考URLも覗いてみたのですが、どれも全てデータが表示された状態で初心者の私では応用することができませんでした。
関連するQ&A
- CSV形式のExcelファイルをhtmlで表示
訳あって以下のソースを使わなければなりません。 しかし、これだけではエラーになってしまいますよね？ 私は初心者なので、その他何を加えれば実行できるのか、 その基礎的な部分がまったくわかりません。 以下がそのソースです。list1というExcelのデータを表示するものです。 <HTML> <HEAD> <TITLE> </HEAD> <OBJECT CLASSID="clasid:333c7bc4-460f11d0-bc04-0080c7055a83"ID=list> <PARAM NAME="CharSet"VALUE="shift-jis"> <PARAM NAME="DataURL"VALUE="list1.txt"> <PARAM NAME="UseHeader"VALUE="true"> </OBJECT> <TABLE ID="oTable" DATASRC=#list BORDER="2" BGCOLOR="#eeeeff"> <THEAD> <TR> <TD BGCOLOR="#ddddff"><B>品番</B></TD> <TD BGCOLOR="#ddddff"><B><CENTER>品名</CENTER></B></TD> <TD BGCOLOR="#ddddff"><B>カテゴリ</B></TD> <TD BGCOLOR="#ddddff"><B>定価</B></TD> <TD BGCOLOR="#ddddff"><B>特価</B></TD> <TD BGCOLOR="#ddddff"><B>在庫</B></TD> </TR> </THEAD> <TBODY> <TR> <TD><DIV DATAFLD=no ALIGN=right></DIV></TD> <TD><DIV DATAFLD=name></DIV></TD> <TD><DIV DATAFLD=shurui></DIV></TD> <TD><DIV DATAFLD=teika ALIGN=right></DIV></TD> <TD><DIV DATAFLD=tokka ALIGN=right></DIV></TD> <TD><DIV DATAFLD=zaiko ALIGN=right></DIV></TD> </TR> </TBODY> </TABLE> </HTML> どうかお願いしますm(__)m ちなみにエラーメッセージは <object>タグにwidht属性がありません <param>タグが<applet></applet>の外にあります です。 <applet>に何を書けばいいのかわかりません。 このソースの場合、データベースのデータを表示したいだけでもjavaファイルを作らなければならないということでしょうか？ 無知でごめんなさいm(__)m 上記のソースだけ渡されてそれを実行しなければならないので、その他のことがまったくわからないのです。
- ベストアンサー
- ホームページ作成ソフト
- form id、nameの番号振りなおし
jqueryとphpにてフォームを作成しています。 フォームの追加、削除できるシステムを作っており、 フォームの追加はできたので、削除した際のinputのnameやidの番号を振り直しができず困っています。 商品1<br> <a href="javascript:void(0);" class="del" id="del_1">削除</a> <table> <tr> <th>商品番号</th> <td><input type="text" name="item[data][1][sir]" value="<?php echo $item[data][1][sir]; ?>"></td> </tr> <tr> <th>商品名</th> <td><input type="text" name="item[data][1][name]" value="<?php echo $item[data][1][name]; ?>"></td> </tr> <tr> <th>商品個数</th> <td> <select name="item[data][1][num]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> <a href="javascript:void(0);" id="add">フォームの追加</a> としており、 「フォームの追加」をクリックすると 商品2<br> <a href="javascript:void(0);" class="del" id="del_2">削除</a> <table> <tr> <th>商品番号</th> <td><input type="text" name="item[data][2][sir]" value="<?php echo $item[data][2][sir]; ?>"></td> </tr> <tr> <th>商品名</th> <td><input type="text" name="item[data][2][name]" value="<?php echo $item[data][2][name]; ?>"></td> </tr> <tr> <th>商品個数</th> <td> <select name="item[data][2][num]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> 商品3<br> <a href="javascript:void(0);" class="del" id="del_3">削除</a> <table> <tr> <th>商品番号</th> <td><input type="text" name="item[data][3][sir]" value="<?php echo $item[data][3][sir]; ?>"></td> </tr> <tr> <th>商品名</th> <td><input type="text" name="item[data][3][name]" value="<?php echo $item[data][3][name]; ?>"></td> </tr> <tr> <th>商品個数</th> <td> <select name="item[data][2][num]"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> </select> </td> </tr> </table> ができるようにPHPにてSESSION管理をおこなっています。 追加はできたのですが、 上記のフォーム4つほど出した後に商品2を削除した場合の商品1、商品3、商品4の各nameの番号（item[data][＊][sir]、item[data][＊][name]、item[data][＊][num]の＊部分） 振りなおしができず困っています。 いくらやってもできないため、どなたかソースを教えていただけないでしょうか。 宜しくお願いいたします。
- 締切済み
- JavaScript
- このhtmlの書き方は正しいでしょうか。
下記の情報の配置の仕方は正しいでしょうか？ 実際に使用するときは<tbody>～</tbody>を複数増やします。 サンプルでは２つですが、これが400以上になります。 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Type" content="text/html; charset=Shift-JIS" /> <title></title> <style type="text/css"> body { background-color: #f5e088; margin: 0; padding: 0; font-size: 15px; } #base { width: 600px; margin: 0 auto; background-color: #fff; } table#ttt { width: 600px; background-color: #ccc; border: 2px solid #000; padding: 15px 0px; } table#ttt th, table#ttt td { width: 100px; } td#kkk { text-align:center; } table#ccc th { color: #f00; width: 60px; } table#ccc td { } .shashin, td.shousai { width: 150px; background-color: #ff0; } </style> </head> <body> <div id="base"> <form action="#"> <table id="ttt"> <tr> <th>市</th> <td> <select name=""> <option value="">指定していません</option> <option value="横浜市">横浜市</option> <option value="鶴見区">鶴見区</option> <option value="神奈川区">神奈川区</option> <option value="西区">西区</option> </select> </td> <th>町村</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>小学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> <th>中学校区</th> <td> <select name=""> <option value="">指定していません</option> <option value=""></option> <option value=""></option> </select> </td> </tr> <tr> <th>データ</th> <td> <select name=""> <option value="">指定していません</option> <option value="500">500値未満</option> <option value="1000">500値以上1000値未満</option> <option value="1500">1000値以上1500値未満</option> </select> </td> <th>レベル</th> <td> <select name=""> <option value="">指定していません</option> <option value="30">30Lv未満</option> <option value="60">30Lv以上60Lv未満</option> <option value="90">60Lv以上90Lv未満</option> <option value="100">90Lv以上100Lv以下</option> </select> </td> </tr> <tr> <td colspan="4" id="kkk"> <input type="button" id="" value="検索" onclick=""> </td> </tr> </table> </form> 方法その１ <table id="ccc"> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> <tbody> <tr> <td rowspan="3" class="shashin"><img src="" alt="画像"></td> <th>場所</th><td colspan="7">神奈川県横浜市金沢区</td> <td rowspan="2" colspan="2" class="shousai"><img src="" alt="詳細はこちら"></td> </tr> <tr> <th>データ</th><td colspan="3">525値</td> <th>レベル</th><td colspan="3">53Lv</td> </tr> <tr> <th>小学校区</th><td colspan="4">市立第一横浜小学校</td> <th>中学校区</th><td colspan="4">市立第一横浜中学校</td> </tr> </tbody> </table> </div> </body> </html> このような内容を作る時はテーブルが一番正しいのでしょうか？ 最も正しい方法を教えて頂きたいです。
- ベストアンサー
- HTML
- データバインドで生成したテーブルの行の色を変えたい
データバインドで生成したテーブルの各行のセルの色を 各データが持っている色で表示したいと考えています。 以下のようなcsvとhtmlを作ってみたところ yamadaのセルをred、suzukiのセルをyellow、kondoのセルをblue と表示するところまではうまくいったのですが 次ページのtanakaがgreenではなくてredのままになってしまいます。 何か良い方法をご存知の方がいらっしゃいましたら教えてください！ よろしくお願いいたします。 <a.csv> ----------------- name,color yamada,red suzuki,yellow kondo,blue tanaka,green ito,aqua saito,red nakanisi,yellow ota,blue isikawa,green naito,aqua nisino,red azuma,yellow <a.html> ----------------- <script type="text/javascript"> <!-- function chStyle() { for(i=0; i<3; i++){ gyo0[i].style.backgroundColor = td_color[i].value; } } --> </script> <body onload="chStyle();"> <TABLE DATASRC="#ID1" BORDER=1 DATAPAGESIZE=3 ID="table1"> <TR> <TD id="gyo0"><SPAN DATAFLD="color"></SPAN></TD> <TD> <SPAN DATAFLD="name"></SPAN> <INPUT TYPE="hidden"datasrc="#ID1" DATAFLD="color" id="td_color"> </TD> </TR> </TABLE> <BUTTON onclick="table1.previousPage()">BACK</BUTTON> <BUTTON onclick="table1.nextPage()">NEXT</BUTTON> <OBJECT classid="clsid:333c7bc4-460f-11d0-bc04-0080c7055a83" id="ID1"> <PARAM name="CharSet" value="shift-jis"> <PARAM name="DataURL" value="a.csv"> <PARAM name="UseHeader" value="true"> </OBJECT> </body> </html>
- ベストアンサー
- JavaScript
- JS テーブルのデータ検索
JavaScriptのテーブルで データ検索をします。 ヒットしたセルの背景は色付けします。 正規表現を用いて検索するには どのようなコードになりますか？ ※ 正規表現を用いれば セルごとの照合作業は不要です。 つまり、ループ処理は無用です。 [HTML] <form name="form3"> <input name="btn" type="button" value="整数"> <input name="btn" type="button" value="小数"> <input name="btn" type="button" value="半角英字"> <input name="btn" type="button" value="日本語"> <input name="reset" type="button" value="リセット"> </form> <table id="table3" border="1"> <thead> <tr> <th></th> <th>A</th><th>B</th><th>C</th><th>D</th><th>E</th> <th>F</th><th>G</th><th>H</th><th>I</th><th>J</th> </tr> </thead> <tbody> <tr> <th>1</th> <td>風</td><td>25</td><td>fig</td><td>36</td><td>84</td> <td>45</td><td>dog</td><td>鳥</td><td>7.9</td><td>昼</td> </tr> <tr> <th>2</th> <td>16</td><td>ink</td><td>4.3</td><td>1.4</td><td>64</td> <td>6.2</td><td>gal</td><td>7.2</td><td>6.5</td><td>hit</td> </tr> <tr> <th>3</th> <td>arm</td><td>83</td><td>1.8</td><td>6.1</td><td>冬</td> <td>6.4</td><td>8.4</td><td>地</td><td>joy</td><td>cat</td> </tr> <tr> <th>4</th> <td>22</td><td>egg</td><td>春</td><td>番</td><td>3.5</td> <td>天</td><td>人</td><td>7.8</td><td>朝</td><td>2.8</td> </tr> <tr> <th>5</th> <td>月</td><td>愛</td><td>5.1</td><td>花</td><td>bat</td> <td>51</td><td>7.5</td><td>夏</td><td>18</td><td>秋</td> </tr> </tbody> </table>
- 締切済み
- JavaScript
- ブラウザの表示について
よろしくお願いします。 IEでは問題なく表示されて、Opera、Firefox、Safariで表示されないのはHTMLの記述が問題なのでしょうか？ それとも外部スクリプトのほうの問題なのでしょうか？？ 下記はHTMLのソースの一部です。 -------------------------------------------------------------- <head> <title>catalog test</title> <script type="text/javascript" src="test6.js"></script> <style type="text/css"> table{ border-collapse:separate; } table,tbody,tr,th,td{ border-style:solid; } </style> </head> <body onload="YOMIKOMI(3);"> <p> <object id="TEST" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="list2.csv" /> <param name="UseHeader" value="true" /> <param name="TextQualifier" value="'"> <param name="FieldDelim" value=","> </object> </p> <div id="OUTPUT"> </div>
- ベストアンサー
- JavaScript
- ジャバスクリプトで作った自動計算フォームが
ジャバスクリプトで作った自動計算フォームが 動かなくて困り果ております。 初心者です。御指南のほど、どうぞ宜しくお願いします。 ■ 編集ソース <html> <head> <title>テスト</title> <style type="text/css"> <!-- table { border-collapse: collapse; } table, th, td { border: 1px #808080 solid; } th, td { padding: 3px 10px; } th { background-color: #d3e9fa; } td { background-color: #ffffff; } td strong { color: #ff0000; } --> </style> <script type="text/javascript"> <!-- function keisan(){ // 設定開始 // 商品1 var price1 = document.form1.goods1.selectedIndex * 2900; document.form1.goods1.options[document.form1.goods1.selectedIndex].value; document.form1.field1.value = price1; // 小計を表示 // 合計を計算 var total = price1 // 設定終了 document.form1.field_total.value = total; // 合計を表示 } // --> </script> </head> <body> <form action="#" name="form1"> <table> <tr> <th>コース名</th> <th>単価</th> <th>数量</th> <th>縁</th> <th>金額</th> </tr> <tr> <td>激安コースA</td> <td align="right">2,900円</td> <td><select name="goods1" onchange="keisan()"> <option>0</option> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> <option>8</option> <option>9</option> <option>10</option> </select></td> <td><select name="goods1" onchange="keisan()"> <option value="0">額タイプを選択してください</option> <option value="500">タイプ1（500円）</option> <option value="1000">タイプ2（1,000円）</option> <option value="1500">タイプ3（1,500円）</option> </select></td> <td><input type="text" name="field1" size="8" value="0" /> 円</td> </tr> <tr> <td align="right" colspan="4"><strong>合計</strong></td> <td><input type="text" name="field_total" size="8" value="0"> 円</td> </tr> </table> </form> </body> </html>
- ベストアンサー
- JavaScript
- お問い合わせフォームの記述方法
index.html側 <th nowrap="nowrap">項目</th> <td> <SELECT name="subject"> <OPTION VALUE="1">項目を選択して下さい</OPTION> <OPTION VALUE="2">○○○について</OPTION> <OPTION VALUE="3">△△△について</OPTION> <OPTION VALUE="4">ＸＸＸについて</OPTION> </SELECT> </td> </tr> confirm.php側 <tr> <th nowrap="nowrap">項目</th> <td><?=$_SESSION['subject']?></td> </tr> SESSIONをsubjectにしてしまうと出力時にはVALUEの番号しか取れません。 項目名を取るにはどうやって記述すれば良いのでしょうか？ 記述方法を教えて下さい。
- 締切済み
- PHP
- <SELECT>タグの折り返し
テーブルで横幅100で囲った枠の中に、<select>タグを表示しています。 このとき、optionで表示する項目が長いと、テーブルの横幅が伸びてしまいます。 テーブルの横幅が伸びないようにする方法はないでしょうか？ できれば、optionの項目を折り返し表示するとか、プルダウンしたときだけテーブルを突き抜けて表示するとかできれば良いのですが。 たとえば、こんな感じです。 <table border="1" width="100"> <tr> <td> <select name="test"> <option value="d1">1234567890123456789012345678901234567890</option> <option value="d2">1234567890123456789012345678901234567890</option> <option value="d3">1234567890123456789012345678901234567890</option> </select> </td> </tr> </table> 宜しくお願いします。
- ベストアンサー
- HTML
- フォントをまとめて<h5>にできないでしょうか！？
JabaScriptプログラム抜粋です。 表の中の文字が大きすぎてはみ出してしまいます。 そこで、<h5>にすればちょうど枠内に収まりました。 個々の構文に<h5>タグを入れてもいいのですが、まとめて、できる方法は、 ございませんか！？以下よろしくお願いします。 <tr> <tr><th><h5>代表者名</5>:</th><td><input type="text" id="name" size="16"/></td></tr> <tr><th>所属組織:</th><td><input type="text" id="org" size="24"/></td></tr> <tr><th>連絡住所:</th><td><input type="text" id="addr" size="50"/></td></tr> <tr><th>電話番号:</th><td><input type="text" id="tel" size="16"/></td></tr> <tr><th>メルアド:</th><td><input type="text" id="mail" size="40"/></td></tr> <tr> <th>コース選択</th> <td id="selc"> <input type="radio" name="course" value="Aコースドリンク" />Aコース+ドリンク <input type="radio" name="coures" value"Aコースワイン" />Aコース+ ワイン<br/> <input type="radio" name="course" valus="Bコースリンク" />Bコース+ドリンク <input type="radio" name="course" value="Cコースワイン"/>Cコース+ワイン </td> </tr> <tr><th>参加人数:</th> <td> <select id="nums"> <option value="NA">選択</option> <option value="01">01人</option> <option value="02">02人</option> <option value="03">03人</option> <option value="04">04人</option> <option value="05">05人</option> <option value="06">06人</option> <option value="07">07人</option> <option value="08">08人</option> <option value="09">09人</option> <option value="10">10人</option> </select> <tr><th>処理結果:</th><td id="status"> </td></tr> </table> </body> </html>
- ベストアンサー
- JavaScript
お礼
15mm様 ご丁寧な回答ありがとうございました。 完璧に思っていた通りのものが出来ました！！ 感謝、感謝、感激です。 本当にどうもありがとうございました。 今後ともどうぞよろしくお願いいたします。