たとえばこんな感じでテーブルが2つある場合に
class="target"内のth,tdに何か処理をしたい
なんてことがあると思います。
その場合、カンマで区切って記載することになると思いますが
ここで
$('.target th, td')
なんて書いてしまうと、先にカンマの解釈がされてしまうので
.target th
および
td (すべて)
が処理されてしまいます。
こうなってしまわないように
$('.target th, .target td')
と記載します。
カンマがまず処理されるのですね。
Bootstrap、便利なんですが <input type="file" /> だけなぜかイケてないんですよね。
そこで、比較的簡単によりBootstrapっぽくカッコ良くなる実装をしてみました。
style="display:none;"で隠す。val()でのブランク代入はIEで動かないため、<input type="file" />要素自体を消して、同じものを追加する処理とする。テキストボックをクリックしてもファイル選択ダイアログを上げたいって方は
<div class="input-group file-select">
$('.file-select').on('click', function() {
$('#file_select').click();
});
とかにしておけば良いかなーと思います。
<table>タグ内の<tr>を画面上動的に追加するjQueryサンプルコードです。
テーブル部の実装は以下の通り。 （追加データを入力する行を敢えて別テーブルに出してみました）
jQuery側は以下の通りです。
ポイントは行追加しても削除リンクやリストチェックチェックのイベントが取れるように
$('.list-check').on('click', function() {
から
$('#list_table').on('click', '.list-check', function() {
に変更している点ですね。
これでlist_table内に画面上動的に変更があってもイベントがちゃんと取れますね。
あと細かい所だと、行追加のたびに
refleshAllCheckboxes(); を呼んで一括チェックon/offの状態に合わせた行追加をしている所でしょうか。
意外と色々と実装方法がありそうですが
ひとまずこんな感じでいかがでしょうか。
ポイントはoptionを入れ替えるfunctionを共通化している所なんですが
共通化したことによって引数が少し多めになっています。
function placeSelectOptions($this, $child, $grandChildren, jsonval);
- $this セレクトボックスのjQueryオブジェクト
- $child セレクトボックスの子となるjQueryオブジェクト
- $grandChildren セレクトボックスの孫となるjQueryオブジェクト(ない場合はnull/undefined)
- 戻り値 なし
ひ孫が出てきても動くと思います。
よくある"一覧表示リストに並んでいるチェックボックスを一括でon/off制御するコードです"。
一斉チェックとも言いますね。
リストのチェックボックスには class="list-check" をあてて
それをコントロールするチェックボックスには class="check-all" をあてます。
リスト内のチェックボックスをすべてチェックしきった時には
コントロールのチェックボックス(check-all)にもチェック。
（実際にはクリックの度に論理演算しなおしてセット）
一括用のチェックボックスをチェックon/offした場合は
その値をリスト内のすべてのチェックボックスにセット。
また、一括用のチェックボックスがヘッダ・フッタ両方に存在していても
正しく動くようにスタイルクラスを取るような実装になっています。
なお、チェックボックスの値取得・セットは
var 値 = $('checkbox').prop('checked'); // 取得
$('checkbox').prop('checked', 値); // セット
とするのが良いです。
