web-dev-qa-db-ja.com

ユーザーがコピーするhtmlテーブルを選択できるようにする

これは一般的な問題のようですが、Google検索でディスカッションを見つけることができませんでした。

ユーザーは、HTMLテーブル(Webページ外)からデータをコピーして、Word、Excel、テキストファイルなどの別のアプリケーションにデータを貼り付けることを望みます。

しかし、選択プロセスは厄介です。最も基本的な問題は、マウスでドラッグすることにより、ユーザーがテーブルの一部のみを選択したり、テーブル全体のようにlooksを選択したりするのは簡単ですが、実際にはいくつかの空白ピクセルが欠落していることですテーブルの「テーブルネス」が実際に含まれている左上隅にあるため、コピーされた一連のフラットテキストが表示されます。

関連する問題は、特定の列または列の範囲のみを選択できることです。

この状況をうまく処理するためのガイドがあるかどうか疑問に思っています。たとえば、テーブルをトリプルクリックするとテーブル全体が選択される、またはおそらくユーザーがクリックしてテーブルを選択する小さなボタンが存在する、またはcontrol-Aがテーブルのみを選択して全てのページ。これらはそれぞれもっともらしいように聞こえますが、ボタンは不格好に見え、他の2つは非パワーユーザーには不明瞭に見えます。

これに関するディスカッション/ガイド、および/またはこれをうまく行うウェブサイトの例を知っていますか?

5
M Katz

私の推奨は、可能であれば(一般に技術的に可能です)、ユーザーのためにこれを行うcopy to clipboardボタンを用意することです。それを貼り付けます。

実装の詳細に興味がある場合は、詳細についてこの StackOverflow質問 を参照してください

よくある例を以下に示します。

screenshot with a copy to clipboard button present

この例はアプリケーションに関するものですが、これはWebアプリケーションに対しても実行できることを覚えておいてください。

ボタンは「少し不格好」かもしれませんが、非常に使用可能です。テーブルは頻繁にコピーする必要があります。これが最善の方法です。

使いやすさよりも審美性を重視する場合は、何らかのコピーまたは切り取りアイコンを使用できます。

icon of pair of scissors

また、2つの方法を組み合わせて、はさみのアイコンが付いたボタンと、Wordcopyだけを使用して、わかりやすくする一方で、使用法の詳細を説明せずに、雑然としないようにすることもできます。 。

2
Dan