jQueryとdata-herfを使って、サイズが可変するtdをリンク要素にする
サイズが可変するtdを、セルごとリンク要素にするお話。セル内にaタグを使ってリンクを作るとセルの高さが変わったときに、セルに吸着してくれない。
それならいっそのこと、aタグは使用しないでtdのセルごとリンクにさせてしまおうといったおかしな発想から。
スポンサーリンク
このときの要望としては、
・タッチパネルの画面になるため、リンクになる部分の縦や横の幅が狭いのは基本NG。
・対応ブラウザはiPad(safari)とIE10
まずはaタグをブロック要素として、heightとwidthをそれぞれ100%に設定したが、セルの高さには吸着せず。
heightとwidthをそれぞれ100%にしたらセル全体にリンクが伸びるだろうと思っていた矢先、この事実にビックリ。
次に、aタグに固定で高さを設定したが、テーブル内の各セルの内容はデータベースから動的に出力されるので、どれだけの文字が表示されるか未知数であるがゆえに、固定で高さを設定すると表示される内容によっては無駄な余白が発生する場合があるため、この方法も断念。
セルの高さに可変があっても、その高さに応じてリンクエリアも可変させるにはどうすればいいか。
調べていたら、jQueryを用いてtr(行)をリンクさせる記事があったので、特定のtdのみをリンクさせるようにカスタマイズさせていただきました。
$('td[data-href]').addClass('clicklink') .click(function(e) { window.location = $(e.target).data('href'); });
[1行目]tdにdata-href属性を指定
[2行目]クリックしたら、イベント開始
[3行目]window.locationを使い、開いているウィンドウに、.data(‘href’)要素から指定したhrefの内容(リンク先)にリンクします。
カスタマイズしたというよりは、使わないソースを削った感じになりました。
htmlは、リンクさせたいtdに、data-hrefをつけ、そのあとにURLを書きます。
<table> <tbody> <tr> <th>種類</th> <th>英語名</th> <th class="size_l">特徴</th> <th>リンク</th> </tr> <tr> <td>ネコ</td> <td>Cat</td> <td class="size_l">人間によくなつくためイヌと並ぶ代表的なペットとして世界中で広く飼われている。アメリカでは30%以上、ヨーロッパでは24%以上の家庭でネコが飼育されている。</td> <td data-href="http://ja.wikipedia.org/wiki/%E3%83%8D%E3%82%B3">詳細</td> </tr> <tr> <td>イヌ</td> <td>Dog</td> <td class="size_l">現在も、ネコと並んで代表的なペットまたはコンパニオンアニマルとして、広く飼育され、親しまれている。世界全体では4億匹の犬がいると見積もられている。血液型は8種類。</td> <td data-href="http://ja.wikipedia.org/wiki/%E3%82%A4%E3%83%8C">詳細</td> </tr> <tr> <td>ウサギ</td> <td>Rabbit</td> <td class="size_l">声帯を持たないため滅多に鳴く事はないが、代わりに非言語コミュニケーションを用いる。代表的なものは発達した後脚を地面に強く打ち付けるスタンピングで、天敵が接近した時にスタンピングをする事で仲間に警戒を促すのが主であるが、いらいらや不安など不快な感情を持つ時にもこの行動をとる事がある。</td> <td data-href="http://ja.wikipedia.org/wiki/%E3%82%A6%E3%82%B5%E3%82%AE">詳細</td> </tr> <tr> <td>アルパカ</td> <td>Alpaca</td> <td class="size_l">常に群れをなして暮らし、現地では1年中放牧されていて、草や苔を好んで食べる。 通常時は「フェ〜」「フーンフーン」などといった鳴き方をするが、危険を感じると警戒の声を発する。</td> <td data-href="http://ja.wikipedia.org/wiki/%E3%82%A2%E3%83%AB%E3%83%91%E3%82%AB">詳細</td> </tr> </tbody> </table>
リンクさせたいtdにdata-hrefをつけ、リンク先を設定するとjQueryが動作してリンク先にアクセスしてくれます。
aタグで行っていたことを、tdタグで行うといった感じです。
参考にさせていただいたjQueryはどれもtr(行)をリンクさせる方法でした。
いろいろ調べましたが、tdをリンクにするってケースは見当たりませんでした。
普通に考えればaタグのみで終わる話ですしね。
タッチパネルということと、tdが可変されることという条件があったので、ちょっと稀なケースだったのかなと。
よい経験になったので、これはこれで良しです。
- [jQuery] テーブルの行ごとリンクをクリック出来るようにする – かちびと.net
- http://kachibito.net/snippets/table-tr-link-clickable
- もっと少量のjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする方法 | THE HAM MEDIA BLOG
- http://h2ham.seesaa.net/article/208820291.html