多数の数字を持つデータ テーブルを備えたサイトで、特定のテーブルを選択するヘルパー関数を追加しました。これにより、ユーザーはデータをクリップボードにコピーして、お気に入りのスプレッドシート ソフトウェアに貼り付けることができます。私の関数は何もクリップボードにコピーしないことに注意してください。適切な HTML 要素 (つまり、完全な<table>
) を強調表示するだけです。この部分は正常に動作しています。
私は今、機能要求を実装しています: テーブル内の画像は一緒にコピーされるべきではありません. 私の最初のアイデアは、テーブルを選択するときにそれらを非表示にすることでしたが、これもうまく機能しています。しかし、テーブルが選択されなくなったときにそれらを表示したいと思います。私の問題があります。その部分を達成する方法がわかりません。
簡単な例でフィドルを作成しました。典型的なテーブルは次のようになります。
<div>
<table class="data">
<tr>
<th>Table</th><td>#1</td><td><img src="/img/logo.png"></td>
</tr>
</table>
<input type="button" class="select" value="Select">
</div>
次の 2 つの方法で選択できます。
- 下の「選択」ボタン
- テーブル自体をダブルクリックする
...そしてそれを達成するためのコードは次のとおりです。
jQuery(function($){
$("body").on("dblclick", "table.data", function(){
selectTable($(this));
return false;
});
$("body").on("click", ".select", function(){
selectTable($(this).siblings("table.data:first"));
return false;
});
$(document).on("click", noTableSelected);
});
function selectTable($table){
$table.find("img").hide();
selectNode($table[0]);
}
function noTableSelected(){
$("table.data img").show();
}
...selectNode()
テキスト範囲の作成と選択を処理します。
少し助けが必要$(document).on("click", noTableSelected);
です。やり過ぎであるだけでなく、ユーザーがコンテキストメニューを使用して「クリップボードにコピー」コマンドに到達したときにもトリガーされます。また、テーブルでイベントをキャプチャしようとしましたblur
が、そのようなイベントは、思ったときにトリガーされません (フォームコントロールを扱わない場合は役に立たないと思います)。
該当する場合にローンチするアイデアはnoTableSelected()
ありますか? または、画像をクリップボードにコピーしないようにするより良い方法はありますか?