web-dev-qa-db-ja.com

Webページのテーブル行をクリック可能にするにはどうすればよいですか?

簡単なWebベースのレポートを表として表示します。

enter image description here

一部の行はクリック可能ですが、その他の行はクリックできません(3番目の列で確認できます。0より大きい場合、行をクリックして別のページで展開できます)。

行をクリックでき、カーソルがポインタに変わる(クラシックリンクにホバーするのと同じ)ことを示すメモ(heh!)を追加しましたが、それは十分に明確ではありません。

古い「青と下線」のアプローチは避けたいですが、青だけでも潜在的な可能性があります...

では、Webページのテーブル行をクリック可能にするにはどうすればよいですか?


編集:

補足情報:示されている例ではクリック可能な行が1つだけ示されていますが、実際には、何もない行からすべての行まで、クリックできる行はいくつでもかまいません。これは任意であり、存在するデータに依存します。

10
MPelletier

行に注意を向けます特にホバーします。あなたはポインターでそれをやっていますが、(私が見ることができるものから)他に明確な指示はありません。カーソルを合わせたときに背景を微妙に強調表示したり、ではなくカーソルに注意を向けたり、行全体がクリック可能であることを明確にしたりできます。セル/数/単語マウスが偶然終わっただけです。

Color Matters!通常、青色のテキストは「ハイパーリンク」に関連付けられています(明示的な用語ではありません)。リンクテキストのデフォルトの下線が醜いことに多くの人が同意していますが、青の色合いはリンクのほぼ普遍的な色です。試してみてください。これは、「リンク」行を他の行から目立たせ、慣習に固執するのに役立ちます。リンクされた行に下線を引いたり、行自体にボタン/リンクを作成したりするのと同じくらい「大声」ではありません。

ポイントホームを描画するには、ホバー時に行テキストに下線を引きます(この回答のリンクのように!)。少なくとも、ホバー時にリンクテキストの色を変更します。

9
Ben Brocka

クリック可能な行のヒントとして常に適切であるとは限りませんが、この場合は説明に基づいて、展開アイコンが優れたクリックのヒントになると思います。このコンテキストでは、行をクリックすると詳細情報が展開されます。

クリック可能な各行のガターにアイコンを含めます。

以下は私が言っていることのモックアップへのリンクです。

http://i.stack.imgur.com/qJM73.png

8
Jeremy Giberson

マウスオーバー時の強調表示に加えて、行の最後にアイコンを追加します。アイコンはユーザーに一目でわかるwhat'sクリック可能であり、強調表示は(うまくいけば)ユーザーにwhereクリック可能であることを示します。 (whereヒントが表示されない場合でも、クリックするアイコンが表示されます)

そう:

  • クリックできない行については、アイコンはまったくありません。
  • 新しいウィンドウで開くには、矢印アイコンが上を向き、右を指します。
  • 同じウィンドウで開く場合は、まっすぐ右を指します。
  • JavaScriptでテーブルを拡張する場合、おそらく下向きになります。
3
Izkata

現在、同じ問題が発生しています。私にとって、行の各セルをリンクのように見せることの問題は、リンクである行全体であるかどうかがユーザーに明確でないことです、または各セルが別の場所につながるリンクであるかどうか( peteorpeter で言及)。

各行に番号を付ける列を各行の先頭に追加することで問題を解決しています。このように、特定のセルをクリックするとその項目タイプが表示されるのに対し、番号リンクをクリックすると行全体に何かが表示されることは明らかです。

私の例では、販売エリアは販売組織、流通チャネル、部門の組み合わせとして定義されています。販売エリアに関連する設定を処理したい場合や、3つのサブパートを個別に処理する必要がある場合があります。 4つの目的地すべてに直感的な方法で到達できるようにするにはどうすればよいですか?

これが私の解決策です:

Sales Area table with links in each cell

ユーザーが1をクリックすると、Tokyo/Web/Fashion販売エリア。パリをクリックすると、Paris販売組織に行くことを期待しています。

3
Jonathan Benn

@Ben Brockaに同意します。Webの慣習に従うことが望ましいと思います。ただし、テーブルレイアウトは、ここでどのように適用されるかを再考するまで、この規則に挑戦することに同意します。

たとえば、ゼブラストライピングはすでに各行を色で区別しているため、別の行の色はより混乱しますか?また、すべてのフィールドに下線を付けると、ユーザーは下線が引かれたテキストチャンクのそれぞれが異なる位置へのリンクであると考えるかもしれません。それがうまくいかないとは言っていませんが、動作を確実に理解することは少しグラフィックデザインの課題になります。たとえば、ゼブラストライプを削除し、代わりに行の境界線を使用して、リンクされた行の色をより調和して組み込むことができます。

つまり、行全体ではなく、2番目の列(つまり、「 1A Syd-02 ")を特定の行のリンクにすることを検討します。

このようにして、他のテーブル機能との視覚的な競合を引き起こすことなく、慣習に従う明確な視覚的インジケータがあります。 (nameのように見えるので、この列を選びました。データがわからないので、適切だと思うかどうかはわかりません。)

2
peteorpeter