ベストアンサー

jquery にて、アラートダイアログ表示

2010/03/19 11:06

jquery を用いて、下記のようなアラートアクションをしたいと思っています。 ○HTML /* ----------------------------------- */ <table id="stockWrap"> <tr><td class="stock">即納</td></tr> <tr><td class="stock">【予約注文】3ヶ月</td></tr> <tr><td class="stock">【予約注文】6ヶ月</td></tr> </table> /* ----------------------------------- */ ○条件 #stockWrap の中に、「【予約注文】○ヶ月」と「即納」が混在している場合。または、「【予約注文】○ヶ月」と「【予約注文】○ヶ月」が混在ある場合。ただしその他の条件として、 ※<tr>～</tr> の数は状況によって変わり、中身も「【予約注文】○ヶ月」か「即納」も状況により変化します。 ※「【予約注文】○ヶ月」１つのみの場合、「即納」１つのみの場合、「即納」が複数ある場合は、除外します。（アクション開始しません） ※上記には 3ヶ月や 6ヶ月とありますが、【予約注文】○ヶ月は変わる場合があるので、前方一致で【予約注文】と指定したいと思っています。 ○アクション（１）アラートダイアログが表示。可能でしたら、「jQuery Alert Dialogs」を用いてダイアログを表示させたい。テキストは、「納期が違う商品は、同時に決済ができません。<br>別々に注文ください。」と表示さたいと思っています。「jQuery Alert Dialogs」 http://abeautifulsite.net/2008/12/jquery-alert-dialogs/ （２）上記アラートで OK を押したら、 .stock の backgroung-color を #FF0000; にして目立たせる。以上です。つたない説明で申し訳ないですが、何卒よろしくお願い致します。不明な点があったら、補足します。

kazuya88
お礼率28% (38/134)

JavaScript
回答数2
ありがとう数5

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

my--
ベストアンサー率89% (91/102)

2010/03/19 17:14 回答No.2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=shift_jis"> <title>sample</title> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="content-script-type" content="text/javascript"> <style type="text/css"> #popup_container { font-family: Arial, sans-serif; font-size: 12px; min-width: 300px; /* Dialog will be no smaller than this */ max-width: 600px; /* Dialog will wrap after this width */ background: #FFF; border: solid 5px #999; color: #000; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; } #popup_title { font-size: 14px; font-weight: bold; text-align: center; line-height: 1.75em; color: #666; background: #CCC url(images/title.gif) top repeat-x; border: solid 1px #FFF; border-bottom: solid 1px #999; cursor: default; padding: 0em; margin: 0em; } #popup_content { background: 16px 16px no-repeat url(images/info.gif); padding: 1em 1.75em; margin: 0em; } #popup_content.alert { background-image: url(images/info.gif); } #popup_message { padding-left: 48px; } #popup_panel { text-align: center; margin: 1em 0em 0em 1em; } </style> <script src="jquery-1.3.2.js" type="text/javascript"></script> <script src="jquery.alerts.js" type="text/javascript"></script> <script type="text/javascript"> function check() { var elem = $('#stockWrap'); if (elem && elem.text) { var text = elem.text(); var match1 = text.match(/即納/); var match2 = text.match(/【予約注文】\d+/g); if (!match1 && !match2) return false; //- 納期が同じなら【予約注文】複数でもOK ---------- var match2Flag = false; if (match2) { for (var i = 1; i < match2.length; i++) { if (match2[0] != match2[i]) { match2Flag = true; break; } } } if ((match1 && match2) || match2Flag) { //- 納期が同じなら【予約注文】複数でもOKここまで -- //if ((match1 && match2) || (match2 && match2.length > 1)) { // 納期が同じでも【予約注文】複数NG jAlert( '納期が違う商品は、同時に決済ができません。\n別々に注文ください。', 'タイトル', function() { $('td.stock').css('background', '#ff0000'); } ); return false; } return true; } return false; } </script> </head> <body> <table id="stockWrap"> <tr><td class="stock">即納</td></tr> <tr><td class="stock">【予約注文】3ヶ月</td></tr> <tr><td class="stock">【予約注文】6ヶ月</td></tr> </table> <div><button onclick="alert(check());">check</button></div> </body> </html> jquery使うならこんな感じでしょうか。 >「【予約注文】○ヶ月」「【予約注文】半角数値文字の並び」で検索しています。 ○以外は書式が変わらないことが前提です。 <tr><td class="stock">【予約注文】3ヶ月</td></tr> <tr><td class="stock">【予約注文】3ヶ月</td></tr> 事前に対処されてるかも知れませんが、このパターンはOKで評価しています。 NGならこちらで if ((match1 && match2) || (match2 && match2.length > 1)) 適当なところでcheck関数を呼んでやればよろしいかと。動作確認は十二分に。

質問者