質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

1891閲覧

jquery-ui selectable で表の1列だけを選択する方法

退会済みユーザー

退会済みユーザー

総合スコア0

jQuery UI

jQuery UI はjQuery公式のインターフェースライブラリであり、対話型のウェブアプリケーションを作る際に役立ちます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/11/26 11:18

###やりたいこと
jquery-ui selectable を使って表の特定の列だけを選択対象にしたいです

###問題点
マニュアルには filter と cancel というオプションがあって

型:Selector 初期値:"input,textarea,button,select,option"

選択操作で対象となっても、選択状態になることをキャンセルする要素を セレクターで指定します。

とあるのですが

cancel: ':not(.selectable)',

と指定すると .selectable のセルも無効化されてしまいます
jQuery 自体は not セレクタは有効みたいなのですが…

###試したこと
テストコードは以下のようになっていてこの状態だと selectable が動かず
cancel: ':not(.selectable)', の行をコメントアウトすると selectable は動くのですがリンクがクリックできません
要素の部分選択はできない仕様としてあきらめるしかないでしょうか

<html> <head> <link rel="stylesheet" media="all" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"> <style> .ui-selected { background-color:#fee } .ui-selecting { background-color: #eef; } </style> <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <script> $(() => { $('table').selectable({ cancel: ':not(.selectable)', filter: '.selectable' }); }); </script> </head> <body> <table> <tr><th>1</th><th>2</th><th>3</th></tr> <tr><th>11</th><td class="selectable">21</td><td><a href="http://google.com">31</a></td></tr> <tr><th>12</th><td class="selectable">22</td><td><a href="http://google.com">32</a></td></tr> <tr><th>13</th><td class="selectable">23</td><td><a href="http://google.com">33</a></td></tr> </table> </body> </html>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

ベストアンサー

解決済みですが、:notがダメなわけではないので、回答を書き込んでみようかと思います。


セレクタを指定して取得対象した要素は、
その子要素も含めて取得していることになるので、子要素にも影響を与えます。

cancel: ':not(.selectable)',

だと、td.selectableの親要素にあたるtr(HTMLには書いてないですが、勝手に補足されるその親のtbodyも)が、:not(.selectable)に該当してしまうので、その子要素のtd.selectableは、選択できなくなるのだと思います。

なので、これらを考慮してセレクタの指定をしないといけない・・・
つまり、「選択させたい対象」を、「cancel」の指定に含まれないようにすべきなのだと思います。

もうちょっと細かく指定してみる・・・

cancel: 'td:not(.selectable) *',

とか、

cancel: ':not(.selectable) a',

とか。

あるいは、
「選択可能な.selectable」の子要素にも、クリックを正常に扱いたい<a>タグ等が含まれる可能性を考慮して、デフォルト値に<a>タグを追加するのでもいいかもですね。

cancel: 'input,textarea,button,select,option,a',

input,textarea,button,select,optionは、絶対出てこないよ、というのであれば、もっと単純に

cancel: 'a',

これでも。

投稿2018/11/27 03:21

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/11/27 03:57

ありがとうございます 動きました not の書き方がまずかったのですね *:not() とかいてもだめだったのでだめなものかと思っていました ベストアンサーにさせていただきますね
guest

0

http://api.jqueryui.com/1.10/selectable/#option-cancel
をよむとクラス自体は指定できるみたいなので
無理やり cancel クラスをつけてからクラスを設定すると動きました
not がだめだったみたいです

$('table td:not(.selectable)').addClass('cancel'); $('table').selectable({ cancel: '.cancel', filter: 'td.selectable' });

投稿2018/11/27 03:01

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

javascript

1$('table .selectable').selectable();

ではダメなのでしょうか?

投稿2018/11/27 02:09

yambejp

総合スコア114572

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2018/11/27 02:43

回答ありがとうございます やってみましたが投げ縄の開始はできるのですが選択状態になりません… うまく動くと ui-selected というクラスがつくはずで色を変えるようにしています selectable にわたすのは選択したい親要素でないとだめなのかも… そのあたりの仕様が何もかかれてないのでよくわからないのです
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問