0

多数の数字を持つデータ テーブルを備えたサイトで、特定のテーブルを選択するヘルパー関数を追加しました。これにより、ユーザーはデータをクリップボードにコピーして、お気に入りのスプレッドシート ソフトウェアに貼り付けることができます。私の関数は何もクリップボードにコピーしないことに注意してください。適切な 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 つの方法で選択できます。

  1. 下の「選択」ボタン
  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()ありますか? または、画像をクリップボードにコピーしないようにするより良い方法はありますか?

4

1 に答える 1