データバインドで生成したテーブルの行の色を変えたい
- データバインドで生成したテーブルの各行のセルの色を各データが持っている色で表示したいと考えています。
- csvとhtmlを作成し、yamadaのセルをred、suzukiのセルをyellow、kondoのセルをblueと表示することはできましたが、次ページのtanakaがgreenではなくてredのままになってしまいます。
- 解決策をご存知の方がいらっしゃいましたら教えてください！
- ベストアンサー
データバインドで生成したテーブルの行の色を変えたい
データバインドで生成したテーブルの各行のセルの色を 各データが持っている色で表示したいと考えています。 以下のような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>
- ryogoku
- お礼率29% (20/68)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
<BUTTON onclick="table1.previousPage()">BACK</BUTTON> <BUTTON onclick="table1.nextPage()">NEXT</BUTTON> を <BUTTON onclick="table1.previousPage();setTimeout('chStyle()',50)">BACK</BUTTON> <BUTTON onclick="table1.nextPage();setTimeout('chStyle()',50)">NEXT</BUTTON> にしてみて下さい。 どうも、調べてみたところ、表の中身がちゃんと更新される前に、chStyle()が呼び出されるために動作がおかしくなるのだと思います。 なので、chStyle()を呼び出すタイムラグを作っています。 これでもおかしい場合、数値の５０をもう少し大きい値にしてみて下さい。
関連するQ&A
- 分割したCSVを1つに結合させ、データバインドするには
分割したCSVデータをデータバインド時に1つにして利用したい。 【CSVファイル名】 現状：data.csv（3MB） 希望：data1.csv data2.csv data3.csv data4.csv data5.csv (各450KB) 【現行のスクリプト】 <script language="JavaScript"> function filterRec() { var check_cond = input1.value + input2.value + input3.value + input4.value + input5.value if(check_cond != "") { var cond1 = "id=" + "*" + input1.value + "*" var cond2 = "photo=" + "*" + input2.value + "*" var cond3 = "name=" + "*" + input3.value + "*" var cond4 = "setumei=" + "*" + input4.value + "*" var cond5 = "hit=" + "*" + input5.value + "*" var cond_all = cond1 + "&" + cond2 + "&" + cond3 + "&" + cond4 + "&" + cond5 JavaScriptData.object.Filter = cond_all JavaScriptData.Reset() checkCount() } } function filterReset() { input1.value = "" input2.value = "" input3.value = "" input4.value = "" input5.value = "" JavaScriptData.object.Filter = "" JavaScriptData.Reset() checkCount() } function checkTotal() { span1.innerText = JavaScriptData.recordset.recordCount span2.innerText = JavaScriptData.recordset.recordCount } function checkCount() { span1.innerText = JavaScriptData.recordset.recordCount } </script> </head> <body onload="checkTotal()"> <center><button onclick="table1.previousPage()">前の検索結果に戻る<</button><button onclick="table1.nextPage()">>次の検索結果に進む</button><button onclick="filterRec()">キーワードで絞込を実行</button><button onclick="filterReset()">絞込を解除</button> <font size="2">全<span id="span2"></span>件の中から<font color="#ff0000"><span id="span1"></span></font>件が該当しました。</font> <!--見出し設定はじまり--> <table id="table1" style="FONT-SIZE: 9pt" datasrc="#JavaScriptData" width="850" dataPageSize="5"><thead> <tr style="COLOR: white; BACKGROUND-COLOR: #d90005"> <td align="center"><strong>番号</strong><br><input id="input1" style="FONT-SIZE: 8pt" size="10"></input><br><br><br></td> <td align="center"><strong>画像</strong><br><input id="input2" style="FONT-SIZE: 8pt" size="10"><br><br><br></td> <td align="center"><strong>名称</strong><br><input id="input3" style="FONT-SIZE: 8pt" size="40"></input><br></td> <td align="center"><strong>説明</strong><br><input id="input4" style="FONT-SIZE: 8pt" size="50"></input></td> <td align="center"><strong>HIT<input id="input5" style="FONT-SIZE: 8pt" size="15"></input></td></tr></thead> <!--見出し設定おわり--> <tbody><tr style="BACKGROUND-COLOR: wheat"><td align="center"><span datafld="id" datasrc="#JavaScriptData"></span></td> <td><datasrc="#JavaScriptData"><img datafld="photo" src="#JavaScriptData"></a></td> <td><span datafld="name"></span></td> <td><span datafld="setumei"></span></td> <td><span datafld="hit"></span></td></tr></tbody></table></center> <!-- データベース用オブジェクトの指定 --> <object id="JavaScriptData" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"><param name="RowDelim" value=" "><param name="FieldDelim" value=","><param name="TextQualifier" value='"'><param name="EscapeChar" value=""><param name="UseHeader" value="-1"><param name="SortAscending" value="-1"><param name="SortColumn" value=""><param name="FilterValue" value=""><param name="FilterCriterion" value="??"><param name="FilterColumn" value=""><param name="CharSet" value=""><param name="Language" value="ja"><param name="CaseSensitive" value="-1"><param name="Sort" value=""><param name="Filter" value=""><param name="AppendData" value="0"><param name="DataURL" value="data.csv"><param name="ReadyState" value="4"></object> 【経緯】 1 Ajaxを思考錯誤 (挫折) 2 <param name="AppendData" value="0">を編集 (挫折) 最後の手段として熟知者の知恵をお借りしたいと思います。
- 締切済み
- JavaScript
- HTMLとXMLについて
仕事で困っています。 HTMLでテキストの内容表示するソースを作成しているのですが、IE10では表示できるのですが、Google Chrome,FireFoxでは表示できないのです。 <テキストの内容> name,maker,color,year:Int,price:Int アコード,ホンダ,白,92,800000 マークII,トヨタ,白,94,1500000 カムリ,トヨタ,黒,90,550000 サニー,ニッサン,シルバー,96,1200000 MPV,マツダ,赤,91,1350000 デミオ,マツダ,濃紺,95,1400000 シビック,ホンダ,青,93,1100000 シーマ,ニッサン,白,91,2100000 ゴルフ,フォルクスワーゲン,シルバー,94,1700000 シビック,ホンダ,シルバー,92,890000 カローラ,トヨタ,白,92,550000 アコード,ホンダ,濃紺,93,1200000 ステップワゴン,ホンダ,赤,96,1300000 ステップワゴン,ホンダ,白,97,1600000 スカイライン,ニッサン,シルバー,97,2000000 プリメーラ,ニッサン,白,93,650000 ユーノスロードスター,マツダ,青,94,1250000 カローラ,トヨタ,白,90,450000 ゴルフ,フォルクスワーゲン,黒,97,2100000 <HTMLの内容> <HTML> <HEAD> <TITLE>サンプル1</TITLE> </HEAD> <BODY> <P ALIGN=center> <SPAN ID="span1" DATASRC="#carData" DATAFLD="name"></SPAN><BR> <SPAN ID="span2" DATASRC="#carData" DATAFLD="maker"></SPAN><BR> <SPAN ID="span3" DATASRC="#carData" DATAFLD="color"></SPAN><BR> <SPAN ID="span4" DATASRC="#carData" DATAFLD="year"></SPAN><BR> <SPAN ID="span5" DATASRC="#carData" DATAFLD="price"></SPAN> </P> <!-- データソースオブジェクトの指定 --> <OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="DataURL" VALUE="car.txt"> <PARAM NAME="UseHeader" VALUE="true"> </OBJECT> </BODY> </HTML> なぜ表示できないのか分かりません。 どなたか教えてください。
- ベストアンサー
- その他([技術者向] コンピューター)
- htmlとjavascriptの書き方について
データバインドを使用してテキストのデータをhtmlにて表示するよう以下のように作成しています。 この際、現在表示しているhtmlのファイル名を取得し、ファイル名とテキストの”no”が一致したデータだけ表に表示させたいと考えています。（下記サンプルでは101を固定表示するようにしています） どのようにすれば実現可能かご教示お願いいたします。 ■101.html■ <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> function GetFileName(file_url){ file_url = file_url.substring(file_url.lastIndexOf("/")+1,file_url.length) file_url = file_url.substring(0,file_url.indexOf(".")); return file_url; } document.write(GetFileName(location.href)); </script> <TABLE DATASRC="#carData" BORDER=1> <TR BGCOLOR="silver"> <TD>管理No</TD> <TD>車名</TD> <TD>メーカー</TD> <TD>色</TD> <TD>生産年</TD> <TD>価格</TD> </TR> <TR> <TD><SPAN DATAFLD="no"></SPAN></TD> <TD><SPAN DATAFLD="name"></SPAN></TD> <TD><SPAN DATAFLD="maker"></SPAN></TD> <TD><SPAN DATAFLD="color"></SPAN></TD> <TD><SPAN DATAFLD="year"></SPAN></TD> <TD><SPAN DATAFLD="price"></SPAN></TD> </TR> </TABLE> <!-- データベース用オブジェクトの指定 --> <OBJECT ID=carData CLASSID="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <PARAM NAME="DataURL" VALUE="car.txt"> <PARAM NAME="UseHeader" VALUE="true"> <PARAM NAME="filter" VALUE="no=101"> </OBJECT> </BODY> </HTML> ■car.txt■ name,maker,color,year:Int,price:Int,no:Int アコード,ホンダ,白,92,800000,100 マークII,トヨタ,白,94,1500000,101 カムリ,トヨタ,黒,90,550000,102 サニー,ニッサン,シルバー,96,1200000,103 MPV,マツダ,赤,91,1350000,104 デミオ,マツダ,濃紺,95,1400000,105 シビック,ホンダ,青,93,1100000,106 シーマ,ニッサン,白,91,2100000,107 ゴルフ,フォルクスワーゲン,シルバー,94,1700000,108 シビック,ホンダ,シルバー,92,890000,109 カローラ,トヨタ,白,92,550000,110
- ベストアンサー
- JavaScript
- データバインドで表示された文字の一部を表示させない
アクセスのクエリーより、モジュールで作成したCSVファイルを、HTMLでデータバインド表示させています。 CSVの表の中には、日付と時刻というフィールドがあり、それぞれ、次の様に表示されています。 表示レコードの一例： 日付フィールド→2008/6/10 0:00 （日付の後ろに必ず 0：00がついてすしまっています） 時刻フィールド→1899/12/30 9:00:00 （時刻の前に必ず 1899/12/30がついてしまっています） 上記の 0：00 とか 1899/12/30 を ブラウザ側（HTML側)の小手先技で表示させない方法は無いでしょうか？ <table datasrc="#ID1" border=1> <tr> <td><span datafld="Column1"></span></td> <td><span datafld="Column2"></span></td> <td><span datafld="Column3"></span></td> </tr> </table> ちなみに、Column1とColumn2 で、表示されるデータになります。 アクセス側でCSVを作成する段で解消すべきと思いますが、シス担当の権限割が違って手を出せないので（仮に手を出したとしても、アクセスの知識が無いので解決する力が無いので、私には無理と思います） よろしく、お願いします。
- 締切済み
- HTML
- ,区切りでテキストで書かれたテキスト文書に文字列を書き加える（データバインド）
データバインドで使用するテキストデータの内容が以下のように書かれています。 1,aaa.ne.jp/~xxx/ 2,bbb.co.jp/ 3,ccc.com/ ・ ・ ・ ・ このような場合、全てのcolumn2の前に同じ文字列(http://)を追加して表示するようなことはJavaScriptでできますでしょうか？ 表示箇所は現在 <TABLE DATASRC="#Data"> <TBODY> <TR> <TD> <SPAN DATAFLD="column1"></SPAN> </TD> <TD> <A DATAFLD="column2" target="_blank"><SPAN DATAFLD="column2"></SPAN></A> </TD> </TR> </TBODY> </TABLE> といった感じです。 読み込むデータ側には「http://」が書かれていないため当然リンクしてくれません。 テキスト内のデータがかなり多いため、できれば読み込むデータ側のcolumn2にhttp://を付けるという処理は避けたいのです。 どなたかおわかりになる方、ご教授願います。
- ベストアンサー
- JavaScript
- データバインド機能で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,かめ
- ベストアンサー
- JavaScript
- csvファイルのデータを変数として取込むには？
javascriptは１年生です＾＾ データバインドを利用して、テーブルにデータを表示しています。 document.write("<object id='setData' classid='clsid:333C7BC4-460F-11D0-BC04-0080C7055A83'>"); document.write("<param name='DataURL' value='setdata.csv'>"); document.write("<param name='UseHeader' value='true'>"); document.write("</object>"); document.write("<table border='1' datasrc='#setData'>"); document.write("<tr>"); document.write("<td><span datafld='data1'></span></td>"); とこんな感じで続くのですが、csvファイルのデータには、セル幅や背景色等の設定値も含まれています。 これらのデータは表示用のデータではないので、変数として取込まなければなりません。 普通なら、bodyタグの中に、 <input type="hiden" datafld="optionData1"> と書いて、そこからjavascriptで取込むことは可能ですが、document.writeを使うとbodyタグの中が書き換わってしまうので使えません。 （csvファイルの１行分のデータを、HTMLのテーブルで表示する時には、4行～6行と行数が変動するので、予めテーブルをbodyタグの中に書いておくことが出来ません。テーブル行数はスクリプト内で決定するので。なのでbodyタグの中は空でオールjavascriptでHTMLを生成しています） もう一つの方法はフレームを使って、parentで、データを送ることも考えたのですが、もっとスマートな方法はないでしょうか？？
- ベストアンサー
- JavaScript
- ＣＳＶファイルのデータを元に別ファイルを開く
データバインドという機能を使用し、ＣＳＶファイルをテーブル形式で表示するＨＴＭＬ文書を作成しました。 項目［FILENAME］の代わりに画像を表示しクリックすると、他のパソコンの共有フォルダに 格納されているＥＸＣＥＬファイル（ファイル名＝FILENAME）が開くという機能をつけたのですが 「onclick=」で処理を呼び出す際、項目［FILENAME］の値をVbscriptの処理に渡す方法が どうしてもわからず悩んでいます。 （プログラムに直接ファイル名を記述すると正常にファイルを開くことができます） どなたかご存じの方がいらっしゃいましたら、何卒ご教授下さいますようよろしくお願いいたします。 「master.csv」 NO,USER,FILENAME 001,山本,伝票0526 001,田中,伝票0526 001,小川,伝票0526 「index.html」 <object id="ID1" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DB" value="master.csv"> </object> <table datasrc="#ID1" border=1> <tr> <td><span datafld="NO"></span></td> <td><span datafld="USER"></span></td> <td><span datafld="FILENAME"></span></td> <a datafld="FILENAME" onclick=CallXLS("伝票0526")> <img src="imgs/go.gif" BORDER="0"> </a></td> </tr> </table> <script language=VBScript> Function CallXLS(DENPYO) Set objExcel = CreateObject("Excel.Application") objExcel.Visible = True Set objWorkbook = objExcel.Workbooks.Open("\\ＩＰアドレス\経理\会計\" & DENPYO & ".xls") End Function </script>
- ベストアンサー
- HTML
- 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 上記のソースだけ渡されてそれを実行しなければならないので、その他のことがまったくわからないのです。
- ベストアンサー
- ホームページ作成ソフト
- csvファイルの内容を絞り込みたいのですが
csvファイルの内容を絞り込んで表示させようと思っているのですが、うまくいきません。考えて色々やって見たのですが出来ないので、どなたかアドバイスを頂けないでしょうか。 <form name="myFORM"> 人数を選択してください <select name="myNinzuu"> <option selected value=1>1人 <option value=2>2人 <option value=3>3人 </select> <input type="button" value="データを表示" onClick="window.open('data.html','_blank')" /> </form> ------------------data.html------------------------ <html> <script type="text/javascript"><!-- var Sanka = new Array[iti,ni,san]; var Index = document.myFORM.myNinzuu.value; if(window.opener.myFORM.Ninzuu.value){ document.write('<object id="myDatabase" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">'); document.write('<param name="DataURL" value="data.csv">'); document.write('<param name="UseHeader" value="true">'); document.write('</object>'); } --></script> <body> <table datasrc="#myDatabase" id="myTBL"> <tr> <td><DIV datafld="ikisaki"></DIV></td> <td><DIV datafld="Sanka[Index]"></DIV></td> </tr> </table> </body></html> ------------------csvファイル------------------------ ikisaki,iti,ni,san, 東京,28000,54000,75000, 名古屋、15000,28000,40000, 広島、18000,23000,47000, 所々消したので文法的に大間違いがあるかもしれませんが・・・ csvファイルのx軸を絞り込みたいのです。 まだまだ勉強不足でわかってないところが多く、根本的に間違っているかもしれませんが、その辺の指摘も含めてお願いします。
- ベストアンサー
- JavaScript
お礼
出来ました！ とても困っていたので本当に助かりました！ 本当にありがとうございました！