jQueryでclassを削除する方法
- jQueryを使用して、テーブルのthやtdの中に空白や未入力があった場合に、classの「tb_menu_border」を削除する方法について説明します。
- 具体的な記述方法として、以下のコードを使用することでクラスの削除が可能です。
- $(".tb_menu_border").text().replace(/\s+/g,'').length > 0 $("table").removeClass("tb_menu_border");
- ベストアンサー
jquery classの消し方
jquery初心者です。 テーブルのthやtdの中に空白や未入力があった場合、classの「tb_menu_border」を削除したいのですが、どのように記述したらよいかわかりません。 どなたか詳しい方は、いらっしゃいますでしょうか？ <script type="text/javascript"> <!-- if($(".tb_menu_border").text().replace(/\s+/g,'').length > 0){ $("table").removeClass("tb_menu_border"); }; --> </script> <table class="tb_menu"> <tr> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> </tr> <tr> <th class="tb_menu_border"> </th> <td class="tb_menu_border"> </td> <td class="td_menu_sp"> </td> <th class="tb_menu_border"></th> <td class="tb_menu_border"></td> <td class="td_menu_sp"> </td> <th class="tb_menu_border"> </th> <td class="tb_menu_border"> </td> <td class="td_menu_sp"> </td> </tr> </table>
- korokorodaijin
- お礼率57% (4/7)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
class名が「tb_menu_border」すべてに対して空白、未入力の場合classの「tb_menu_border」を取り除くようにしました。 やりたいことはこれであってるかな？ $('[class="tb_menu_border"]').each(function(){ if ($(this).text().replace(/\s+/g,'').length == 0) { $(this).removeClass("tb_menu_border"); } });
その他の回答 (1)
- babu_baboo
- ベストアンサー率51% (268/525)
//そのうち、きっとちゃんとした回答がつくでしょう！ //テーブル要素の 子孫要素で class が tb_menu_border のものを集めなきゃ！ var es = document.querySelectorAll ('table *.tb_menu_border'); //集めたものはノードリストなので配列とはちょっと違う、なのでコピーして配列に変えておこう！ es = Array.prototype.slice.call (es, 0); //そうそう、要素の持つテキストから空白を取り除いて、空白かどうか調べる関数が必要だな！ function isNoText (e) { return ! e.textContent.trim (); } //そうそう、空白なら class を消してしまう関数も必要だな！ function remove (e) { e.classList.remove ('tb_menu_border'); } es.filter (isNoText) /* ふるいにかけて、*/ .forEach (remove); // 消しちゃへ！ //あちゃぁ、querySelectorAll,tlim,classList,filte,forEach が使えないのがあるらしい。
お礼
詳しいご説明ありがとうございます！ 試してみたのですが、no.1さんの方に記述したのですが、どうも動作しないんですよね。
関連するQ&A
- tableの外枠をCSSで表示させない方法
HTMLで作ったテーブルの外枠の縦線をCSSで表示させないようにしたいのですが可能でしょうか？ HTMLはさわらずにできる限りCSSでやりたいと思い、いろいろ試してみましたがうまくいきませんでした。 線種はsolidを使いたいです。 よろしくお願いいたします。 <html> <head> <title>css table</title> <style type="text/css"> <!-- table.sample { width:550px; height:auto; border:solid 1px; border-collapse:collapse; border-left:none; border-right:none; } .sample th { width:100px; border:solid 1px; } .sample tr { border:solid 1px; } .sample td { border:solid 1px; } --> </style> </head> <body> <table class="sample" frame="hsides"> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> <tr> <th scope="row"> </th> <td> </td> <td></td> <td></td> </tr> </table> </body> </html>
- ベストアンサー
- CSS
- ＣＳＳについて 初心者です。
勉強中の身なんですが・・ このように設定した場合文章１と文章２が大きく開く状態になるんですが、なぜでしょうか？ また文章１セルの真ん中に表示され文章２が左にひょうじされるのも分りません・・・・ いろいろ調べてみたんですが中々納得ができなくて・・・ 特にこうういう風にやりたいとかは特になくて、なんでこうなるのかが知りたいのです。 詳しい方説明して頂けるとありがたいです。すみませんがよろしくお願い致しますｍ（。。）ｍ 「ＨＴＭＬ」 <table> <tr> <th>見出し</th> <th></th> <th> </th> <th> </th> </tr> <tr> <td>内容</td> <td> </td> <td> </td> <td></td> </tr> </table> 「ＣＳＳ］ table{ width:250px; border-collapse:collapse; border-width:1px; border-style:solid; border-color:#000000; border-spacing:0; } th{ border-width:1px; border-style:solid; border-color:#000000; } td{ border-width:1px; border-style:solid; }
- ベストアンサー
- HTML
- テーブルのレイアウトがおかしくなる
畏れ入ります。 テーブルを作っているのですが奇妙な現象にあっています。 <table border="1" width="100%"> <tr> <th width="18"> </th> <th width="100"> </th> <th> </th> <th width="100"> </th> </tr> <tr> <td rowspan="2"> </td> <td> </td> <td> </td> <td> </td> </tr> <tr> <td colspan="3"> <!-- ここに たくさんの 文字列を入れると ・・・ --> </td> </tr> </table> このコメントの部分が無い状態では正常にでていますが、 ここにたくさんの文字列（半角30文字程度でおかしくなります）を投入すると、レイアウトが異常に崩れてしまいます。 文字列は改行してもかまわないのですが テーブル1行目2行目のセルサイズ（width）がこのように変化してしまうと困るのです。 どのようにしたら良いか（width=100の部分を守らせたい） 教えてください。
- ベストアンサー
- HTML
- jqueryでどうやってエスケープ？
<table border> <tbody> <tr><th>名前</th><th>学年</th><th>評価</th></tr> <tr><td>山田</td><td>１年</td><td>A</td></tr> <!-- ここにエスケープしてappendしていきたい。 --!> </tbody> </table> はじめまして。 上記のようなテーブルがあり、ここに新しく <tr><td>鈴木</td><td>2年</td><td>B</td></tr>をエスケープしてjqueryで追加していきたい場合、一般的にどのように書けば良いのでしょうか？ エスケープせず追加するのなら、 $("table").append("<tr><td>鈴木</td><td>2年</td><td>B</td></tr>"); と書けば良いかと思いますが、エスケープしながら追加していく方法がわかりません。 わかる方、宜しくお願い致します。
- ベストアンサー
- JavaScript
- <table>のclass指定が継承されない
<table>に指定したclass指定が、その下の<td>や<tr>に継承されずに困っています。 HTMLを <table class="sample"> <tr> <td>1-1</td> <td>1-2</td> </tr> <tr> <td>2-1</td> <td>2-2</td> </tr> </table> とし、 cssを table, td { border: 2px #2b2b2b solid; } とした場合、新しくhtmlとcssを作ると表自体と全セルに囲み線が作られます。 ですが、今運営しているHPに記述すると、<table>のborderのみしか表示されません。 試しに、<td>にclassを指定しなおしてみると、そのセルにも囲み線が表示されました。 全<td>にclassを指定すれば問題ないのかもしれませんが、それではあまりにも使い勝手が悪いため、何とかhtmlは<table>のみにclassを指定することで全セルに反映させたいと思っています。 考えられる原因としてはどのようなものがありますでしょうか…？
- ベストアンサー
- CSS
- FireFoxでborder-collapseを使うと余計な枠線が表示される
FireFoxでborder-collapse:collapseを指定すると、余分な枠線が表示されてしまいます。 IEでは問題ありません。 <HTML> <HEAD> <title>TEST</title> <style type="text/css"> table { border-collapse: collapse; } td { border: 1px solid black; } td.none{border:none;} </style> </HEAD> <BODY> <table> <tbody> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td rowspan="2">test</td><td class=none> </td><td rowspan="2">text</td><td class=none> </td></tr> <tr><td class=none>text</td><td td class=none> </td></tr> <tr><td class=none> </td><td td class=none> </td><td class=none> </td><td class=none> </td></tr></tbody> </table> </BODY> </HTML> 何か対策は無いでしょうか？
- 締切済み
- その他([技術者向] コンピューター)
- CSSのテーブルについて教えて下さい。
テーブルなのですがh1が適用されません。 又表の枠線が黒になりません。 また（休診）を赤にしたいのですが表示されません。 どこをどう直したらいいのか教えて下さい。 お願いします。 h1 { margin: 1em 0; padding: 0.3em; border: 1px silver solid; background: url(../image/subpage_h2_bg.gif) bottom repeat-x; color: gray; font-weight: bold; font-size: large; } /*hyou*/ caption{ color: #996666; padding-bottom: 14px; text-align: center; } table{ width: 800px; border: solid 2px ; border-collapse: collapse; } th,td { padding: 5px; border: solid 1px #000000; text-align:center; } th { background-color:silver; font-weight: bold; } td.col01{ font-weight: bold; background-color:silver; } em { color: red; font-weight: bold; } /* テーブル列幅指定 */ .cola { width:100px; } .col01{ width: 100px; } .col02{ width: 70px; } .col03{ width: 70px; } .col04{ width: 70px; } .col05{ width: 70px; } .clo06{ width: 70px; } .style1 {margin-left:1em; } HTML <h1>外来診療のご案内</h1> <table> <caption>外来診療 予定表</caption> <tr> <th class="a">診察科</th> <th class="b">月</th> <th class="c">火</th> <th class="d">水</th> <th class="e">木</th> <th class="f">金</th> <th class="g">土</th> <th class="h">日</th> </tr> <tr> <th class="col01">一般歯科</th> <td class="col02" rowspan="4"><em>休診</em></td> <td class="col03" colspan="5">◯</td> <td class="col04" rowspan="4"><em>休診</em></td> </tr> <tr> <th class="col01">小児歯科</th> <td class="col02">◯</td> <td class="col03"> </td> <td class="col04">◯</td> <td class="col05"> </td> <td class="col06">◯</td> </tr> <tr> <th class="col01">歯列矯正</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05">◯</td> <td class="col06"> </td> </tr> <tr> <th class="col01">審美歯科</th> <td class="col02"> </td> <td class="col03">◯</td> <td class="col04"> </td> <td class="col05"> </td> <td class="col06">◯</td> </tr> </table>
- ベストアンサー
- HTML
- スタイルシートをhead内で定義したい
下のテーブルのようにしたいんですが、上のテーブルはすきまができています。 このすきまをなくすために、<STYLE>の中を修正してください。 <TABLE>内は変更せずに<STYLE>だけでできるはずです。 <HTML> <HEAD> <STYLE> table.ccc{border:solid;border-color:#bbbbcc} td.ccc{border:solid;border-color:#bbccbb} .ccc th{border:solid;border-color:#ccbbbb} </STYLE> </HEAD> <BODY> <TABLE class="ccc"> <TR class="ccc"> <TH>名前</TH> <TH>住所</TH> </TR> <TR class="ccc"> <TD class="ccc">太郎</TD> <TD class="ccc">東京都新宿区</TD> </TR> <TR class="ccc"> <TD class="ccc">花子</TD> <TD class="ccc">沖縄県那覇市</TD> </TR> </TABLE> <br> <TABLE cellspacing=0 style="border:solid 4px #ddddee"> <TR> <TH style="border:solid 4px #eedddd">名前</TH> <TH style="border:solid 4px #eedddd">住所</TH> </TR> <TR> <TD style="border:solid 4px #ddeedd">太郎</TD> <TD style="border:solid 4px #ddeedd">東京都新宿区</TD> </TR> <TR> <TD style="border:solid 4px #ddeedd">花子</TD> <TD style="border:solid 4px #ddeedd">沖縄県那覇市</TD> </TR> </TABLE> </BODY> </HTML>
- 締切済み
- HTML
- マウスオーバー時テーブルの背景色を変えているのですが
質問させていただきます。 テーブルを作成してマウスオーバーしている行の バックカラーを変えるプログラムを作成しています。 ですが、rowspanを使用すると、rowspanが別の行 扱いになり、バックカラーが変えられなくなってしまいました。 一緒にしたい場合どうしたら良いでしょうか。 もしわかりましたらご教授下さい。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <meta http-equiv="Content-Style-Type" content="text/css"> <script type="text/javascript"><!-- firstcolor="#ffffff"; //初めの色 nextcolor="#eeeeee"; //変更後の色 function table_row(table_id){ tobj=document.getElementById(table_id).tBodies[0]; for (i=0; i<tobj.rows.length;i++){ tobj.rows[i].onmouseover=function(){this.style.backgroundColor=nextcolor}; tobj.rows[i].onmouseout=function(){this.style.backgroundColor=firstcolor}; } }// --></script> </head> <body> <table border=1 id="data_table2"> <thead> <tr> <th>No</th><th>DATA1</th><th>DATA2</th><th>DATA3</th> </tr> </thead> <tbody> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td>No</td><td> </td><td> </td><td> </td> </tr> <tr> <td rowspan="2"> </td><td rowspan="2"> </td><td>DATA</td><td>DATA</td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td>No</td><td>DATA</td><td>DATA</td><td>DATA</td> </tr> </tbody> </table> <script>table_row("data_table2")</script> </body> </html>
- ベストアンサー
- JavaScript
- テーブルのスタイルを効率よく設定するには？
同じページに複数のテーブルがあり、別のスタイルを適用させたい。 ---- <style TYPE="text/css"> TABLE.A {border-style: solid; } TH.A { color: red; } TD.A { color: blue; } TABLE.B {border-style: double; } TH.B { color: green; } TD.B { color: black; } </style> <table class=A><tr><th class=A>A</th><td class=A>A</td></tr></table> <table class=B><tr><th class=B>B</th><td class=B>B</td></tr></table> --- <table><th><td>タグにclassを書けばいいのですが、もっとすっきりした方法はないでしょうか？
- ベストアンサー
- HTML
お礼
ありがとうございます！ 今、試してみたのですが、動作しないんですが、 この書き方だとおかしいですかね？ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="table.js"></script> <link rel="stylesheet" type="text/css" href="test.css"/> <script type="text/javascript"> $('[class="tb_menu_border"]').each(function(){ if ($(this).text().replace(/\s+/g,'').length == 0) { $(this).removeClass("tb_menu_border"); } }); </script> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>無題ドキュメント</title> </head> <body> <table class="tb_menu"> <tr> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> <th class="tb_menu_border">メニュー名</th> <td class="tb_menu_border">300円</td> <td class="td_menu_sp"> </td> </tr> <tr> <th class="tb_menu_border"></th> <td class="tb_menu_border"></td> <td class="td_menu_sp"></td> <th class="tb_menu_border"></th> <td class="tb_menu_border"> </td> <td class="td_menu_sp"> </td> <th class="tb_menu_border"> </th> <td class="tb_menu_border"> </td> <td class="td_menu_sp"> </td> </tr> </table> </body> </html>