テーブルで休憩や昼休みの文字を指定して背景色を変える方法
- テーブルタグを使ったスケジュール表で、特定の文字列が入った要素の背景色を変える方法について教えてください。
- スケジュールの時間により、「休憩」や「昼休み」の配置が変わるため、条件で背景色を変えたいです。
- jQueryを使用して、指定した文字列が含まれる要素の背景色を変更するコードを試しましたが、結果は変わりませんでした。他に良い方法はありますか？
- ベストアンサー
CSS 特定の文字列が入った要素を指定して処理
テーブルタグを使ったスケジュール表があり、「休憩」や「昼休み」という文字があったら、背景の色を変えるといったものをしたいです。 スケジュールの時間により、「休憩」や「昼休み」の配置が変わってしまいます。なので、条件で背景の色を変えるようにしたいです。 https://handywebdesign.net/2017/11/jquery-contains/ ヘッダー内に <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script type="text/javascript">$(“td:contains(‘休憩’,’昼休み’)”).css(“background-color”,”#ccc”);</script> を記述。 結果は変わりませんでした。 何かいい方法がありましたら教えてください。 よろしくお願いします。
- nkmyr
- お礼率67% (403/600)
- CSS
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
大きく分けて二つの問題があります。 ``` <script type="text/javascript">$(“td:contains(‘休憩’,’昼休み’)”).css(“background-color”,”#ccc”);</script> ``` こちら、「全角」で書かれています。そのためそもそも、命令として認識されていないという問題。 二つ目は、メソッドのプロトタイプが1つしかないのに、パラメタを2個与えた問題。 ``` :contains(text) ``` 以上を整理すると、2つに分けてしまえばOKです。 $("td:contains('休憩')").css("background-color","#ccc"); $("td:contains('昼休み')").css("background-color","#ccc"); これで、動作しますよ。 ただし、この分を「HTMLの最後」に書いてください。 先に書くと、まだ書かれてもいない文字を探すので、 何も起こらずに終了します。 これで解決でしょうか？
関連するQ&A
- jQueryが動きません。
表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って 導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので 手が出ない状態です。 よろしくお願いします。
- 締切済み
- JavaScript
- jquery3系がうまくいかない
jquery3系が出ていたので使ってみたのですが、CDNはうまくいったのですが、そのものをダウンロードして使うほうがうまくいきません。 https://code.jquery.com/jquery-3.1.1.min.js のソースコードをコピペしてjquery-3.1.1.min.jsというファイルを自分で作って下記のようにしているのですが、CDNが読み込まれなかった場合に読み込むというやり方のようです。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery --> ・もちろん下記のようにもしましたが駄目でした。 <!-- start load jquery --> <!--[if lt IE 9]> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-1.11.0.min.js"><\/script>')</script> <![endif]--> <!--[if gte IE 9]><!--> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script> <!--<![endif]--> <!-- end load jquery -->
- ベストアンサー
- JavaScript
- jquery
とあるサイトの 1つのソースの中に <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> と <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> があるのですが この二つは意味が違うのでしょうか？ バージョンが 1.7.1と1.11.1になっていますが 1.11.1が数字が高いから、1.11.1だけあればいいのでしょうか？
- 締切済み
- JavaScript
- これはどういう意味のコードですか？
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="shift_jis"></script> これはどういう意味のコードですか？ 私のサイトに入ってるコードですが意味が分からないまま使っています。 サイト内でjqueryで検索機能はつけていますが ネットから拾ってきたものを組み合わせたものであり、 意味は分かっていません。 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" の意味だけ教えていただけませんか？ jqueryを使う上での宣言みたいなものでしょうか？
- ベストアンサー
- JavaScript
- 何をする為のjqueryなのでしょうか？
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> は何をする為のjqueryなのでしょうか？ googleと言う単語がパスの中に入ってますが googleに関連するものでしょうか？
- ベストアンサー
- JavaScript
- <hoge />と<hoge></hoge>の違い
現在jQueryを使ったプログラムをしていて、気になった点があったので質問させていただきました。 具体的には <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"/> <script type="text/javascript"> function show() { } </script> こんなソースを書いていましたが、showメソッドが認識されていませんでした。 そこで <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script> とかくと、後ろのメソッドも認識されました。 ここで疑問なのは</>と</script>の違いです。 この２つは何がちがうのでしょうか？
- ベストアンサー
- JavaScript
- 複数jQueryの配置で干渉 設置位置
Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 １サイト目（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 ２サイト目（HTML head内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の２サイトを合体させた：（HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 （HTML header内に配置） <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> （HTML 最下部に配置） <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか？
- 締切済み
- JavaScript
- 実行の順番を教えて下さい。
---------------------------------------------------------------------------------------------------------------- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> ( tmp_jquery=jQuery ・・・（１） )( function(){ $=jQuery=tmp_jquery; ・・・（２） } ); </script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <script> $(function(){ alert(jQuery.fn.jquery); ・・・（３） }); </script> ---------------------------------------------------------------------------------------------------------------- 上記の処理では、jQuery1.7.1をロードして後、jQuery1.2.3をロードしていますが、 （１）のところで、jQuery1.7.1を保持し、 （２）で再び$とjQuery変数にロードしているため （３）のところで、"1.7.1"と表示されます。 さて、ここで（２）の部分がいつ実行されるのかが理解できません。 そもそも、今回の処理で記述されている ()() の意味がわかりません。 クロージャーなどで、 (function(){})() と記述しますが、 function(){}を式として認識させるために丸括弧で囲っているのは、 以下のサイトで知りました。 http://d.hatena.ne.jp/amachang/20080208/1202448348 今回も同様の意味なのでしょうか？ だとすれば、（１）の前に（２）が実行されそうなのですが・・・。 どなたか、ご説明お願いできないでしょうか？
- ベストアンサー
- JavaScript
- jqueryのアニメーションが動かない！！
$(".skinTitleArea").css("opacity","0"); $(function(){ $(".skinTitleArea").animate({"opacity","1"},500); }; って入れても動かない。 http://ameblo.jp/koko5666/ アメブロなのですが、append等はちゃんと反映されてるのでjquery本体は読み込まれてます。なのにアニメーションanimateが動かない。入れるとjqueryが読み込まなくなって、他の記述も反映されなくなる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js"></script> アニメーションが入ってるjavascriptは現在消してます https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js
- ベストアンサー
- JavaScript
- google apiの使用方法
jQueryとgoogleマップのapiを同時に使用する方法を教えていただきたいと思います。 両方を使用するとカスタマイズしたgoogleマップは表示されますが、jQueryに不具合が起きます。 同時に使用する方法はないでしょうか。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script> 他に必要なことがあれば提示しますのでよろしくお願いします。
- 締切済み
- CSS
お礼
ありがとうございます。 パラメタを2個与えてしまったのですか。 最後に書く理由もなるほどでした。 大変勉強になりました。