• 締切済み

javascriptでcsvのデータを使い価格表示

はじめまして、garage-daxと申します。 現在、会社のサイトを作成しておりまして、 HTML並びにjavascriptを勉強しております。 そこで、つまづいておりまして、諸先輩方、ご教授お願い したいと思っております。 やりたいこととしては、jsvascriptとHTMLのみで価格を別管理したいのです。 今後の消費税増税対応が面倒なので、価格は別管理にしたいと思っております。 つきましては、csvに「商品ID」「商品価格」を格納し、HTMLの「class="price"」後に 価格を表示したく思っております。 下記までは、自分なりにがんばってみたのですが、このソースだと「商品A」しか 価格が入りません。 これを全ての商品に適応させたいのですが、可能でしょうか。 よろしくお願いします。 Web表示------------------------ 商品名A 　┗価格：9,800円//ここの価格表示できました 商品名B 　┗価格：12,800円 商品名C 　┗価格：22,800円 商品名D 　┗価格：7,500円 ------------------------------- price.csv---------------------- "商品名A","9,800" "商品名B","12,800" "商品名C","22,800" "商品名D","7,500" ------------------------------- html--------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.csv.js"></script> <script type="text/javascript"> $('.price').each(function(i){ var kakaku = '<br>┗<font color="#CC0000">価格：9,800円</font><br>'; $(this).after(kakaku); }); </script> </head> <body> <a href="商品名A.html" class="price">商品名A</a><br> <a href="商品名B.html" class="price">商品名B</a><br> 　┗<font color="#CC0000">価格：12,800円</font><br>　←ここの価格を自動表示させたい <a href="商品名C.html" class="price">商品名C</a><br> 　┗<font color="#CC0000">価格：22,800円</font><br>　←ここの価格を自動表示させたい <a href="商品名D.html" class="price">商品名D</a><br> 　┗<font color="#CC0000">価格：7,500円</font><br>　←ここの価格を自動表示させたい </body> </html> -------------------------------

みんなの回答

  • hamachi98
  • ベストアンサー率100% (5/5)
回答No.2

一気にプログラミング要素が盛りだくさんになるのであまり気が進まなかったのですが、 実際のHTMLは他の要素も間に入っているような場合は、 たしかに付け合わせをして追記していかないと都合が悪いことになりそうですね。 失礼致しました。 処理フローの概略としては 1:CSVデータを読み込み、商品名をキーとした配列を定義 2:.priceをeachし、自身のテキスト（＝商品名）に該当する価格をappend という形ですが、AjaxでCSVデータを取得しに行くので実行タイミングを取得後にしなければならないので eachする処理一式を関数化し、取得後に実行するようにしました ※前回使用したjquery.csvが思ったように動かなかったので https://code.google.com/p/js-tables/source/browse/trunk/jquery.csv.js?r=22 を使用しました ===== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.csv.js"></script> <script type="text/javascript"> $.get( 'price.csv', function (data) { var csv = $.csv()(data); var item = new Array(); $(csv).each(function(){ item[this[0]] = this[1]; }); addPrice(item); } ); function addPrice(item) { $('.price').each(function(){ $(this).after('<br>┗<font color="#CC0000">価格：' + item[$(this).text()] + '円</font><br>'); }); } </script> </head> <body> <a href="商品名A.html" class="price">商品名A</a><br> <a href="商品名B.html" class="price">商品名B</a><br> <a href="商品名C.html" class="price">商品名C</a><br> <a href="商品名D.html" class="price">商品名D</a><br> </body> </html>

garage-dax
質問者

お礼

ご連絡が遅くなりまして、申し訳ございません。ご教授頂いたソースを駆使して、なんとか消費税増税対応を乗り切ることができました。 本当に助かりました。 ありがとうございました。

  • hamachi98
  • ベストアンサー率100% (5/5)
回答No.1

提示されていた処理ロジックは 「HTML内に存在する商品リンクに対応する価格を追記する」 というような方向だと思うのですが、 その方式だと情報の付け合わせが大変なのと、 商品追加の際にHTMLの変更も必要になるので 「CSVのデータを元に商品リンクと価格を出力する」 という方向でループ処理させてみました。 ※csvのパースには以下のスクリプトを使用させていただきました jquery-csv http://tips.recatnap.info/wiki/JQuery%E3%81%A7CSV%E3%82%92%E9%85%8D%E5%88%97%E3%81%AB%E5%A4%89%E6%8F%9B_($.csv()) ===== <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="js/jquery.csv.js"></script> <script type="text/javascript"> $.get( 'price.csv', function (data) { var csv = $.csv()(data); $(csv).each(function(){ $("#list").append( '<a href="' + this[0] + '.html" class="price">' + this[0] + '</a><br>　┗<font color="#CC0000">価格：' + this[1] + '円</font><br>' ); }); } ); </script> </head> <body> <div id="list"></div> </body> </html>

garage-dax
質問者

補足

hamachi98さん ありがとうございました。 お察しのとおり、 >「HTML内に存在する商品リンクに対応する価格を追記する」 >というような方向だと思うのですが、 だっったのですが、こちらは可能でしょうか。 お手数をおかけいたします。 ご教授頂けますでしょうか。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • javascriptを２つ使うと１つの動きしかしません。

    初心者です。ホームページを作っています。 以下のように記述してjavascriptで2つの動きをしたいのですが１つしか動きません。scriptをべつのファイルにしたのですが動かないのですが。どう記述したらいいのでしょうか？ よろしくお願いします。 <html> <title></title> <head> <script language="javascript" src="test.js"></script> </head> <center> <body text="#000000" onLoad="timer1=setTimeout('fadein(0,100)',100)"> <br><br> <font size="8" color="green">ようこそマイホームページへ</font><br><br> <img src="top.jpg"><br><br> <a href="top.html"> <img src="main.jpg"></a> <form action="top.html"> </form> <script language="javascript" src="common.js"> </script> <a href="javascript:void(post())">3秒後に遷移します。画面が変わらない場合はクリックしてください</a> </center> </body> </html>

  • JavascriptでHTMLを書き換えたいのです

    うまく動作しないJavascriptなのですが、こういった方法は可能なのでしょうか？ お分かりになりましたらご教授お願いします。 -------------------- ■html <div class="orenge1"></div> オレンジ１です<br> <div class="orenge2"></div> オレンジ２です<br> <div class="orenge3"></div> オレンジ３です<br> -------------------- ■Javascript 記述は最下部の</body>直前です。 <script type="text/javascript"> window.onload = function() { document.getElementsByClassName("orange1").innerHTML = ('<a href="./item/?item=orange1">商品はコチラ</a>'); document.getElementsByClassName("orange2").innerHTML = ('<a href="./item/?item=orange2">商品はコチラ</a>'); document.getElementsByClassName("orange3").innerHTML = ('<a href="./item/?item=orange3">商品はコチラ</a>'); } </script> -------------------- ■やりたい事 <div class="orenge1"></div> の部分に <a href="./item/?item=orange1">商品はコチラ</a> を表示したいと思っています。 同一ページに複数回表れる場合もあります。 よろしくお願い致します。

  • JavaScriptの画面表示について

    ●質問の主旨 次の文章の内容をGoogleChrome上で 表記したいのですが、 5行目の 「30個ご購入なら、通常72000円のところが、今なら48900円！」 が表記されません。 以下に示すコードのうちどこに問題があるでしょうか？ ご存知のかたご教示よろしくお願いします。 ●本来表記したい文章 新製品 テンデイパックS のご紹介 話題の テンデイパックS を通常価格 2400 円のところを 特別価格 1680 円でご提供！ まとめ買いならさらにお得！　10個につき500円お引きします。 30個ご購入なら、通常72000円のところが、今なら48900円！ ●JavaScriptのコード <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <title>10日で覚えるJavaScript</title> <script type="text/javascript"> //変数の定義 var prod_name = 'テンデイパックS'; var prod_price = 2400; </script> </head> <body> <h1>新製品 <script type="text/javascript">document.write(prod_name);</script> のご紹介</h1> <p>話題の <script type="text/javascript">document.write(prod_name);</script> を通常価格 <script type="text/javascript">document.write(prod_price);</script> 円のところを</p> <p>特別価格 <script type="text/javascript">document.write(prod_price*0.7);</script> 円でご提供！</p> <p>まとめ買いならさらにお得！10個につき500円をお値引きいたします。</p> <script type="text/javascript"> var kosuu = 30; var special_price = prod_price * 0.7 * kosuu - kosuu / 10 * 500; document.write('<p>' + kosuu + '個ご購入なら、通常' + (prod_price * kosuu) + '円のところが、今なら' + special_price + '円!'</p>; </script> </body> </html>

  • 文字の大きさを変更するjavascriptについて

    文字の大きさを変更するjavascriptについての質問です。 現在以下のようなスクリプトを使用しているのですが、 IE６では動作しますがFirefox2.0では動きません。 原因、アドバイス等あればご指摘お願いします。 *****このスクリプトを外部ファイルとして読み込んでいます***** function larger(){ content_area.style.fontSize="14pt"; } function standard(){ content_area.style.fontSize="12pt"; } function smaller(){ content_area.style.fontSize="9pt"; } *********************************************************** *****head内の外部js読み込み部分***** <script type="text/JavaScript"　src="common/js/fontsize.js"></script> ************************************ *****body内のjavascript呼び出し部分***** <ul> <li class="text_large"><a href="javascript:larger()">文字サイズ大</a></li> <li class="text_mid"><a href="javascript:standard()">文字サイズ中</a></li> <li class="text_small"><a href="javascript:smaller()">文字サイズ小</a></li> </ul> **************************************** よろしくお願いします。

  • javascript

    現在、下記画面のような カテゴリー１をクリックすると、ポップアップ形式で 項目1　項目2　項目3　・・・ カテゴリー２をクリックすると、同じくポップアップ表示で 項目A　項目B　項目C　・・・・ という文字列が表示され、例えばカテゴリ１の「項目1」をクリックすると テキストエリアに選択された「項目1」が追加されるというものを 以下のサイトを参考に作成しました。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_other/jtagging.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB ---------------------- カテゴリー１ カテゴリー２ 　　・ 　　・ 　　・ テキストエリア ---------------------- (1)しかし、このままだと、テキストエリアのカーソルがある位置にその文字を追加することができません。 (2)また、同じ項目を選択できません。 やりたいイメージは、以下のテキストエリアの状態のとき (1) あいう　かきく 　　　↑ 　　カーソル位置 「項目1」を選択すると あいう項目1かきく となるようにしたい (2) あいう項目1 かきく項目1 どこをどのように改造すると上記２項目を実現できるのかがわかりません。 どなたか、お知恵を貸してください。 ソースコードは、以下の通り HTML ---------- <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jQuery.jTagging.js"></script> <script type="text/javascript"> $(function() { $("#TagTextArea1").jTagging($("#TagDiv1"), " "); }); $(function() { $("#TagTextArea1").jTagging($("#TagDiv2"), " "); }); </script> <!-- CSS --> <link href="drop.css" rel="stylesheet" type="text/css"/> </head> <body> <table> <tr> <td> <div id="items1"> <div class="format">カテゴリ１</div> <div class="foo"> <div id="TagDiv1" class="box"> <a href="#" onclick="return false;">項目1</a><br /> <a href="#" onclick="return false;">項目2</a><br /> <a href="#" onclick="return false;">項目3</a><br /> <a href="#" onclick="return false;">項目4</a><br /> <a href="#" onclick="return false;">項目5</a><br /> <a href="#" onclick="return false;">項目6</a><br /> <a href="#" onclick="return false;">項目7</a> </div> </div> </td> <td> <div id="items2"> <div class="format">カテゴリ２</div> <div class="foo"> <div id="TagDiv2" class="box"> <a href="#" onclick="return false;">項目A</a><br /> <a href="#" onclick="return false;">項目B</a><br /> <a href="#" onclick="return false;">項目C</a> </div> </div> </div> </td> </tr> </table> <p>選択内容:</p> <p><textarea id="TagTextArea1" cols="40" rows="6"></textarea></p> </body> </html>

  • javascriptでCSVを読み込み表示する方法を探しています。

    javascriptでCSVを読み込み表示する方法を探しています。 <div id="hoge"> <ul class="hogehoge"> <li><a href="1行目の1つ目のデータ">1行目の2つ目のデータ</a></li> <li><a href="2行目の1つ目のデータ">2行目の2つ目のデータ</a></li> ・ ・ ・ </ul> </div> で、ulに囲まれた部分をjavascriptで生成させたいのですが・・・ （ulのところのCSS指定は、idではなく、classにしたいです） よろしくお願いいたします。

  • JavaScript　フレーム

    Javascriptをふたつ書くことはできないんですか？ ２つ書いたら「い」のほうしか宣言されないんでどうしたらよろしいですか？ Update.java,kensaku2.java syouhin_kensaku.html,syouhin_master.html <html> <head> <title>メニュー</title> </head> <body> <script type="text/javascript"> <!-- function jump(){ // 設定開始（表示するフレーム名とリンク先URLを設定してください） parent.hakusi.location.href = "syouhin_kensaku.html"; parent.hakusi2.location.href = "Update"; // 設定終了 } // --> </script> <a href="#" onClick="jump(); return false;">あ</a> <br> <br> <script> <!-- function jump(){ parent.hakusi.location.href = "syouhin_master.html"; parent.hakusi2.location.href = "kensaku2"; //設定終了 } // --> </script> <br> <a href="#" onClick="jump(); return false;">い</a> <br> <br> </body> </html>

  • thickboxのグループ化がうまくいかない原因は？

    はじめまして。 thickboxと格闘しています・・・ グループ化しなければ、ふつうに表示できるのですが、 グループ化したとたんに、見られなくなります。 これは、なぜなのでしょうか？？？ 特別変わったことは何もしていません。 バッティングするようなjsも、置いてません。 javascriptのことはほとんどわかりませんので、 簡単に教えていただけるととても嬉しいです。 ちなみに・・・ index.html(このページで表示させたい） jquery.js thickbox.css thickbox.js 001.jpg 002.jpg 003.jpg これらをすべて同じレベルに配置しています。 ↓index.htmlは、こんな感じです。 -------------------------------------------------- ～略～ <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>サンプル</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script> <link href="thickbox.css" rel="stylesheet" type="text/css" media="all"> </head> <body> <a href="001.jpg" class="thickbox" rel="test" >画像1</a><br> <a href="002.jpg" class="thickbox" rel="test" >画像2</a><br> <a href="003.jpg" class="thickbox" rel="test" >画像3</a> </body> ～略～ -------------------------------------------------- 初歩的なことで申し訳ないのですが、宜しくお願いいたします。

  • 表示と非表示

    下のような物があったときに、１を押したときに１が現れるのですが、続けて２を押したときに１と２が表示されてしまいます。 この時に、２を押したら、１を非表示にして２だけを表示したいのですが、可能でしょうか？ よろしくお願い致します。 <HTML><HEAD><TITLE>test</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function apper(sLayers) { if (document.all) { if (document.all(sLayers).style.display=='inline') {　 document.all(sLayers).style.display='none'; } else { document.all(sLayers).style.display='inline'; } } return (false); } // --> </SCRIPT> <style type="text/css"> span.hidden { position: relative; display: none } span.visiable { position: relative; display: inline } // --> </style></HEAD> <BODY> <a href="" onClick="return apper('1')">質問１</a><br> <a href="" onClick="return apper('2')">質問２</a><br> <a href="" onClick="return apper('3')">質問３</a><br> <span class="hidden" id="1">1<br></span> <span class="hidden" id="2">2<br></span> <span class="hidden" id="3">3<br></span> </BODY></HTML>

  • lightwindowでPDFを表示させるには？

    lightwindowを使って、PDFを表示させたいと思っています。 いろいろなサイトを参考にして、以下のようにコーディングしたのですが、 jpgの方はうまく表示されるのに、PDFは何も起こりません。 PDFは何か特別な指定が必要なのでしょうか？ <!--Lightwindowスクリプト開始--> <link rel="stylesheet" href="css/lightwindow.css" type="text/css" media="screen" /> <script type="text/javascript" src="javascript/prototype.js"></script> <script type="text/javascript" src="javascript/effects.js"></script> <script type="text/javascript" src="javascript/lightwindow.js"></script> <!--Lightwindowスクリプト終了--> 【うまくいかないPDF】 <a href="file/wind02-1.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"><img src="img/wind02-1mini.jpg" alt="第13号" border="0"></a> <a href="file/wind02-2.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-3.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> <a href="file/wind02-4.pdf" class="lightwindow" rel="[wind2]" title="新しい風 第2号"></a> 【うまくいくjpg】 <a href="img/8tiiki-1.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"><img src="img/8tiiki-1mini.jpg" alt="第8号 地域版" border="0"></a> <a href="img/8tiiki-2.jpg" class="lightwindow" rel="[no8tiiki]" title="第8号 地域版"></a>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する