- ベストアンサー
jQueryで最後の１文字を消したい
tableのtd要素内のテキストの最後の文字をjQueryで消したいのですが、うまくいきません。 どのようにしたらよいでしょうか？ 【HTML】 <table> <tr><td>あああ</td><td class="iii">いいいい</td></tr> </table> 【JavaScript】 var str = $('.iii').text(); var str2 = str.slice(0, -1); $('.iii').text(str2);
- dwyane_messi
- お礼率31% (12/38)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
class指定のタグは一意に決定できないので、each関数ですべてのタグを 処理するか、"iii"のtdタグがページ内に1カ所であるなら、id="iii"に変更 すれば、うまくいきます。
その他の回答 (1)
- warpspace
- ベストアンサー率56% (83/147)
＞相変わらず最後の文字が消えないのですが… Jqueryおよびスクリプトの記述位置・記述方法が誤っていると思われますよ。 （当方のテストでは問題なく動作しています）
関連するQ&A
- jQueryで合計を出したい
<table> <tr> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> <td class="point"><input type="text"></td> </tr> </table> とHTMLで記述していて、jQueryを下記のように記述しました。 var total; j$(".point:text").change(function(){ j$(".point:text").each(function(){ var point = j$(this).val(); total = parseInt(point)+total; }); alert(total); }); alertで返ってくる結果が「NaN」となります。 どのようにすれば合計値が求められるでしょうか。 やりたいことは「pointクラス」内のテキストフォームの値を合計したいです。
- ベストアンサー
- JavaScript
- idをつけてるtdタグの値をjQueryで
初めて質問させていただきます。 下記のようなテーブルがあった場合、<td id="ID">1234</td>の「1234」をjQueryで取得したいのですが、うまくいきません。 ご教授お願いいたします。 テーブルの例 <table id="nameTable"> <thead> <tr> <th>aaa</th> </tr> <tr> <td id="ID">1234</td> </tr> </thead> </table> 記述したjQuery $('table.nameTable td.ID').text();
- 締切済み
- JavaScript
- IEでjQueryのtoggleが動作しません。
IEでjQueryのtoggleが動作しません。 inputをクリックすることで同じクラス名が与えられている 行を非表示／表示の切替えを行なおうとしています。 FireFox,Safariその他のブラウザでは正常に動作します。 スクリプトの記述に誤りがあるのでしょうか？以下ソースです。 ■JavaScript <script type="text/javascript"> $(document).ready(function(){ $("#sets input").click(function () { var trshow = $(this).attr("class"); $("tr"+"."+trshow).toggle(); } ); }); </script> ■HTML <table id="sets"> <tr> <td>0001 ああああ<br /> <input type="button" class="set01" value="セット内表示/非表示" /></td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr> <td>0002 いいい<br /> <input type="button" class="set02" value="セット内表示/非表示" /></td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> </table> ■CSS .set { display: none; }
- ベストアンサー
- JavaScript
- jQueryのhideのやり方について教えてください。
jQueryのhideのやり方について教えてください。 下記のようなtr要素に触れたときにp要素を表示するといったものです。 ページを読み込んだときは非表示にしておいて触れると表示するようにしたいのですが・・・読み込んだときに非表示にするにはどのようにしたらいいでしょうか？ また、p要素に触れると当然ですがp要素が消えてしまいます。 どのように対策したらいいでしょうか？ <table class="style1"> <tr id = "tr1"> <td class="style3"></td> <td class="style4"> <img alt="" src="login-blue.gif" style="width: 89px; height: 26px" /></td> <td class="style5"> <img alt="" src="b_count1.gif" style="width: 24px; height: 27px" /></td> <td class="style6"></td> <td><div id = "load1"></div></td> </tr> <tr> <td class="style2" colspan="5"> <p id = "dtl">熱いジュースふりぼる <br /><a href=gazo.htm>すごいジュース捻りだす</a></p> </td> </tr> </table> $("#tr1").hover( function() { $("#dtl").show(); }, function() { $("#dtl").hide(); } );
- ベストアンサー
- JavaScript
- Jqueryでのテーブル背景色設定について
お世話になります。 CSSとJavascriptどちらで投稿しようか考えたのですが、Jqueryを使用しているのでこちらに質問させていただきました。 ブラウザはIE8を使用しています。 今回 <table class="list"> <tr><th></th></tr> <tr><td></td></tr> . . . <tr><td></td><tr> </tr> このようなテーブルを作りセルの背景色一行ごとに変えたいと思いJqueryで $(function(){ $('table.list tr:even').addClass("linecolor"); }); というスクリプトを作ったのですが反映されません。 CSSは .linecolor{ background#FFFFC4;} としてます。 原因を探ったのですが、いくつかのサイトを見てもこの書き方で問題ないように思います。 試験的にロジックを替えスクリプトの"tr"を"td"と書き換えるとスタイルが適応され、 <tr> => <tr class="linecolor>"としてもスタイルが適応されませんでした。 このことから個人的な結論としてはIE８では<tr>指定でスタイル等を適応させることができないのではないかと思いました。 本当に<tｒ>にスタイルを適応させることはできないのでしょうか。 また、Jqueryを用いた対処方法があれば教えていただきたいです。 お手数ですが、アドバイスをお願いいたします。
- ベストアンサー
- JavaScript
- IE8でjQueryのtoggleが動作しません。
IE8でjQueryのtoggleが動作しません。 inputをクリックすることで同じクラス名が与えられている 行を非表示／表示の切替えを行なおうとしています。 同様の内容を、 http://okwave.jp/qa/q6117684.html で質問し、IE7とIE8の互換モードでは動作できるようになりました。 metaタグで強制的に互換モードにする以外に 対処法がありましたら教えてください。 ■JavaScript <script type="text/javascript"> $(document).ready(function(){ $("#sets input").click(function () { var trshow = $(this).attr("className"); $("tr"+"."+trshow).toggle(); } ); }); </script> ■HTML <table id="sets"> <tr> <td>0001 ああああ<br /> <input type="button" class="set01" value="セット内表示/非表示" /></td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr class="set01 set"> <td>サンプルサンプル</td> </tr> <tr> <td>0002 いいい<br /> <input type="button" class="set02" value="セット内表示/非表示" /></td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> <tr class="set02 set"> <td>サンプルサンプル</td> </tr> </table> ■CSS .set { display: none; }
- ベストアンサー
- JavaScript
- jQueryのラジオボタン操作系サンプル探してます
jQueryをペチペチと勉強していますが、ちょっと詰まってしまいました。 以下のような動作をするサンプルプログラムを探しています。 「ラジオボタンを押下すると、それに対応するテーブルのtr要素の背景色を変更する。」 ==========ソースここから========== <table border ="1"> <tr id ="0" class ="table_1"> <td>hoge1</td><td>hoge1</td><td>hoge1</td> </tr> <tr id ="1" class ="table_1"> <td>hoge2</td><td>hoge2</td><td>hoge2</td> </tr> <tr id ="2" class ="table_1"> <td>hoge3</td><td>hoge3</td><td>hoge3</td> </tr> </table> <table border ="1"> <tr> <td><input type ="radio" name ="radio_hoge" value ="100" id ="0" class ="radio_1"></td><td>hoge1</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="200" id ="1" class ="radio_1"></td><td>hoge2</td> </tr> <tr> <td><input type ="radio" name ="radio_hoge" value ="300" id ="2" class ="radio_1"></td><td>hoge3</td> </tr> ==========ソースここまで========== HTMLの構成はこんな感じにしてあります。 下側のテーブル内のラジオボタンを押下すると、上側のテーブルのtrの背景色を変更したいのですが、指定の方法が分からず悩んでいます。 （trとradioは、同一「id」値と対応する。ものとしたい。 現状、他に実現してある内容は ・tr行にマウスオーバーすると、trの色を変える ・tr行をクリックすると、trの色を変えて保持する ・tr行をクリックすると、対応するラジオボタンを選択する です。 コレに、 ・ラジオボタンを選択すると、対応するtr行の色を変える を追加したく思っています。 当面の問題は、tr(のid？)に対して「this」以外で指定を行う方法が分からない。 ということかと思っています。 コレ(trに対してthis以外で指定)が分かれば、もう一つやろうとしてる、tr行でクリックした以外のtr行の色を初期色に戻す。 あたりも解決すると思っているので、ご存じの方がいましたら、教えていただけると助かりますm(_ _)m 以下は、現状実現してある内容～の参考にしたサイトです。 >>・tr行にマウスオーバーすると、trの色を変える http://1bit.mobi/20120313111043.html >>・tr行をクリックすると、trの色を変えて保持する http://ponk.jp/jquery/basic/state_save の「４」番目 >>・tr行をクリックすると、対応するラジオボタンを選択する http://www.tohoho-web.com/lng/199912/99120188.htm よろしくお願いします。
- ベストアンサー
- AJAX
- jquery select要素のdisplay:noneについて
jqueryを使用して、要素の表示・非表示をさせたいのですが、 下記、コードで問題が出ています。 <html> <head> </head> <script src="js/jquery-1.2.6.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function(){ $(".dis").toggle( function(){ $("table.displayArea").attr("style","display:block"); }, function(){ $("table.displayArea").attr("style","display:none"); } ); }); </script> <body> <a href="#" class="dis">test</a> <table class="displayArea" style="display:none"> <tr> <td><select name=""> <option selected="selected">選択</option> </select></td> </tr> </table> </body> </html> aタグをクリックするとselectフォームがちゃんと表示されるんですが、 再度クリックしてもselectフォームが非表示にされません。 試しに、フォームでなくただのテキスト文字にしてみると、 ちゃんと、表示・非表示がうまくいきます。 その他のフォーム要素も試してみたのですが、問題ありませんでした。 なのでselect要素だけちゃんと非表示されないようです。 何が原因なのかお分かりになる方がいらっしゃいましたら、 ご教授いただけると幸いです。
- ベストアンサー
- JavaScript
- JQueryでクリックされた文字を取得したい
テーブルがあり、連番が 1 2 3 と振ってあります。 その文字情報をJQueryで取得するにはどのように記述すれば良いのでしょうか？ 例）1をクリック → 1 を取得。 <table border="1" width="150"> <tbody> <tr> <td width="50"><a href="#">1</a></td> <td>田中</td> </tr> <tr> <td><a href="#">2</a></td> <td>佐藤</td> </tr> <tr> <td><a href="#">3</a></td> <td>鈴木</td> </tr> </tbody> </table> ご存知の方教えて下さい。
- ベストアンサー
- JavaScript
- jquery input 要素取得
失礼します。現在テーブルに記載されているテキストとinputの要素を取得して配列に格納したいのですが、input要素を取得できません ソースコードはこちらです。ご教授いただけますでしょうか。宜しくお願い致します。 <table id="tbl"> <tr> <td>fdfasdf</td> <td>hfadhfh</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> <tr> <td>hfdaha</td> <td>hfdsahsa</td> <td><input type="number" name="number" min='0' max="30" value=""></td> </tr> </tbody> </table> <script> var data = []; var tr = $("table tr");//全行を取得 for(var i=0, l=tr.length; i<l;i++ ){ //行数分回す var nk = 0; var cells = tr.eq(i).children();//1行目のtrの子要素は取得 for(var j=0, m=cells.length; j < m; j++ ){ //子要素分のcell分回す 0 < cell if(typeof data[i] == "undefined"){ //typeof(型判定) data[i] = []; //data[0] } if(nk < 2){ data[i][j] = cells.eq(j).text();//i行目j列の文字列を取得 data[0][0] ++nk; } data[i][j] = cells.eq(j).val(); } } </script>
- ベストアンサー
- JavaScript
補足
tdタグのclass="iii"をid="iii"に変更し、JavaScriptの方を$('#iii')にしても、相変わらず最後の文字が消えないのですが…