###やりたいこと
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>
回答3件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2018/11/27 03:57