ソフトウェア開発者の日常

こだわりなく書きたいことを書いていきます。

jQuery

JavaScript テーブルのrowspanを動的に変更する方法

テーブルで表示している内容を、ラジオボタンの操作でテーブルのrowspanを変更して表示しなければならなくなりました。下のテーブルのように、あるときは2行を結合、あるときは3行を結合します。 列1 列2 列1のデータ1 列2のデータ1 列2のデータ2 列1のデー…

jQueryプラグインChosenでクリックして選択できない現象

jQueryプラグインのChosenを適用して動作確認をしたところ、一度非表示にして再度表示にすると、Chosenを適用したセレクトボックスが無効状態のままになることに気がつきました。表示/非表示の切り替えは、以前書いた記事の方法で行っています。 JavaScript…

jQueryプラグインChosenで選択肢の表示幅が狭くなる現象

jQueryプラグインのChosenを適用して動作確認をしたところ、選択肢を選択するためにクリックすると、選択肢を表示をする部分の幅が狭く表示されました。 原因を調べる Chosen適用前のselectタグに幅を指定していますが、Chosen適用後に幅の指定はしていませ…

jQueryプラグインChosenで選択肢の動的変更方法

3年前に記事を書いた、jQueryプラグインのChosenで、他の選択肢に選択結果により、選択肢を動的に変更しなければならくなりました。 ajya.hatenablog.jp unsplash-logoPankaj Patel試した結果として、以下のようにすればできました。 // 選択肢削除 $('#sele…

JavaScript:Internet Explorer 11だけは、子孫要素をまとめて無効にできる?

以前、テーブル内の子孫要素をまとめて無効にするためには、find()とeach()を使うと書きました。 ajya.hatenablog.jpこのとき、当初は $(".rowall").css("display", "none").prop('disabled', true); としていました。この記述を残したまま、以前の記事に書…

JavaScript:子孫要素をまとめて無効にする

テーブルの複数行をまとめて非表示にする方法として、tbodyタグでtrタグを挟んで、tbodyを指定して操作すると書きました。 ajya.hatenablog.jpテーブルの中にはinputタグが複数あり、非表示にしたときは、inputタグを無効にしたかったので、 $(".rowall").cs…

jQueryプラグインChosenで検索機能をオフする方法

昨日の記事でselectボックスで長い文字列を折り返してくれるjQueryプラグインのChosenを取り上げました。ajya.hatenablog.jpChosen: A jQuery Plugin by Harvest to Tame Unwieldy Select Boxesその中で 検索機能をオフする方法は、Hide Search on Single Se…

selectボックスで、長い文字列を折り返して表示するjQueryプラグイン

selectタグのoption要素として、ある名称を使ったところ、文字数が多すぎてはみ出す結果になりました。 文字数減らせばいいのですが減らすのも難しいので、なにか方法はないかと検索したところ、jQueryのプラグインのChosenを見つけました。 Chosen: A jQuer…

JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスがあるセルの背景色を変更する方法

昨日の記事でチェックボックスの有効/無効の切り替え方を書きました。 JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法 - ソフトウェア開発者の日常 JavaScript:jQuery:参加者のチェックボ…

JavaScript:jQuery:参加者のチェックボックスのON/OFFで、同行者のチェックボックスの有効/無効を切り替える方法

代表の参加者が選んだセミナーのみ、同行者が参加できるようにシステムを作成して欲しいと要望がありました。入力する画面では制限をもうけず、入力内容を確認する画面で判定して表示することも考えましたが、手間がかかります。 入力画面で代表の参加者が選…

パスワード変更画面をモーダルウインドウにしました

あるシステムでパスワードの変更画面を作成することになり、パスワード変更をクリックしたら、モーダルで表示することになりました。 モーダルで表示する内容のソースコードは、元の画面のソースコードとは分離して作成した方が、機能を分けられるので後から…

JavaScript:jQuery:ime-modeの切替

Ineternet Explorer独自で追加され、Firefoxでも利用できるらしいime-modeを、選択肢に合わせてJavaScriptで切り替えることができるか試してみました。結果 jQuery('#target').css("ime-mode", "auto"); として、IMEの状態を変更しないように設定できます。 …

JavaScript:jQuery:jQueryのバージョンによって違う動作

一覧表のチェックボックス全てに、一括でチェックを入れる全選択ボタンと、一括でチェックを外す全解除ボタンを作成しました。 処理のJavaScriptは、以前のソースコードを流用して、以下のコードで動作確認をしました。 $('#all_select').click(function() {…

ボタンを画像にすると、Internet Explorer 8では、期待通りの動作をしない

formタグ内のボタンが、最終的には画像にする予定で、開発初期は <input type='submit' name='next' id='next' value='next'> として、submitのボタンとしていました。 予定通りの動作をするようになったので、見た目の調整の一環として、ボタンを予定通り画像にするために、 <input type='image' name='next' id='next' src='./next.jpg' value='next'> としました。 現象 Google Chromeでは動…

JavaScript:jQuery:onLoadの代わりの記述方法

jQueryを便利に使っていますが、bodyタグのonLoadのタイミングの処理は、そのまま書くしかないと思っていました。 あるとき調べてみたら、 jQuery.event.add(window, "load", function() { func_cnt(); }); とすれば、onLoadと同じタイミングで処理できるこ…

JavaScript:jQuery:optionタグの一括削除と一要素ずつの追加方法

セレクトボックスの選択肢を、他の選択によって切り替える必要があったため、方法を探しました。 方法 HTMLでは、selectタグにoptionタグを使って選択肢を追加しています。 最初と最後のoptionタグの要素は変更なくそのまま使える条件でしたが、一括で削除し…

jQuery:配列の値を取得する方法

別の方法では、上手くいかなかった。 photo credit: kohtzy via photopin cc name属性が配列になっている要素から、値を取得して、全て値が設定されていなかったら、警告を表示したかったので、ループしながら値を取得する方法を調べた。 調べた結果、以下の…

jQuery:要素の存在をチェックする方法

以前読んだ覚えがあったので、調べたら簡単な方法だった。 photo credit: Ezu via photopin cc プログラムをデバッグしていたら、存在しない要素から値を取得しようとして、動作がおかしくなっていることに気がついた。 以前jQueryでできることを調べていた…

HTML:iframeでフッターを共通化できるか試している その2

困ったときのjQueryプラグイン。 photo credit: Rodrigo Baptista via photo pin cc 前回iframeでフッターを共通化できないか試していることを書いたが、その続き。 HTML:iframeでフッターを共通化できるか試している - ソフトウェア開発者の日常 heightを…

jQuery:値を消す方法

2番目に試した方法で目的を果たせた。 photo credit: nlogax via photo pin cc ちょっと書き方を悩んだけど $('#button').click(function(){ $('#val_a').val(""); }); で値消えた。 最初に試して駄目だったのは $('#val_a').val = ""; と書いていた。 試せ…

jQuery:一番便利だと思う場面

今日、jQueryでコードを少しだけ書いて、改めて便利だと思った点。 photo credit: "Cowboy" Ben Alman via photo pin cc ラジオボタンで、選択を切り替えると同時に検索を実行したいと要望があったので対応したが、jQueryを使わなければ、ラジオボタンのタグ…

jQuery:htmlを書き換える方法

以前のソースコードに書いてあって、なかなか探せなかったので、自分へのメモ。 spanタグに囲まれた要素を書き換えるときは、 $("#elem").html('<span id="elem">abc</span>'); とすれば、書き換えることができる。

jQuery:.css(“display”, “none”)が速かった

昨日の処理が遅かった非表示のコードを速くするために試した結果、 for(loop=1172; loop = 0; loop--){ $("#record" + loop).css("display", "none"); } としたら速かった。驚くくらいの速さだった。 こうしたら、なぜか表示が遅くなったので、 for(loop=0; …

jQuery:.show()と.hide()を比較すると、.hide()が遅かった

以下のコードを表示と非表示の切り替えに使ったら、非表示が極端に遅かった。 for(loop=0; loop <= 1072; loop++){ $("#record" + loop).show(); } for(loop=1072; loop >= 0; loop--){ $("#record" + loop).hide(); } tableのtrを表示/非表示にしているが…