まだまだ少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする

jquery javascript CSS

最近めっきりブログもご無沙汰です。

さて、どっかから回ってきたこの記事が気になったので、もっとイマドキ風にしてみようというエントリー。

元記事 少しのjQueryコードでHTMLテーブルの列にリンク先を指定できるようにする | かちびと.net

そもそも、アクセシビリティとかクロスブラウザとかプログレッシブエンハンスメントとか、まぁどう呼んだって別にいいんだけど、JavaScriptなしの時にアンカークリックしても動作しないなんて、HTMLがそもそも気に入らないので、普通の状態にしています。

<table>
	<thead>
		<tr>
			<th>地名</th>
			<th>読み方</th>
			<th>En</th>
			<th>詳細</th>
			<th>その他</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>東京</td>
			<td>とうきょう</td>
			<td>Tokyo</td>
			<td>日本の事実上の首都がある</td>
			<td><a href="http://ja.wikipedia.org/wiki/%E6%9D%B1%E4%BA%AC">ダミーリンク</a></td>
		</tr>
		<tr>
			<td>京都</td>
			<td>きょうと</td>
			<td>Kyoto</td>
			<td>794年に日本の首都に定められた</td>
			<td><a href="http://ja.wikipedia.org/wiki/%E4%BA%AC%E9%83%BD">ダミーリンク</a></td>
		</tr>
		<tr>
			<td>静岡</td>
			<td>しずおか</td>
			<td>Shizuoka</td>
			<td>静岡市と浜松市の2つの政令指定都市を有する<a href="http://yahoo.co.jp/">なぜかYahoo!</a></td>
			<td><a href="http://ja.wikipedia.org/wiki/%E9%9D%99%E5%B2%A1%E7%9C%8C">ダミーリンク</a></td>
		</tr>
		<tr>
			<td>大阪</td>
			<td>おおさか</td>
			<td>Osaka</td>
			<td>関西地区の経済・文化の中心地</td>
			<td><a href="http://ja.wikipedia.org/wiki/%E5%A4%A7%E9%98%AA">ダミーリンク</a></td>
		</tr>
	</tbody>
</table>

テスト用に静岡のところにYahoo!へのリンクを張ってみました。

次、スタイルはどうでもいいけど、参考まで。

<style>
table{
	border:1px solid #ccc;
}
th,td{
	border:1px solid #ccc;
	padding:5px;
}
th {
	color:#fff;
	background-color:#000;
}
tr:hover{
	background-color:#fedede !important;
	cursor:pointer;
}
</style>

hover 状態で色を変えたりマウスカーソル変えたりする程度ならCSSで十分だよね？
（これが動かないブラウザのことは気にしない、のがプログレ（ｒｙ）

<script type="text/javascript">
<!-- 
$(function() {
	$("table tr:even").css({background:"#dedede"}); // ゼブラ
	$("tbody td").click(function(){
		var url = $(this).parent("tr").find("td a:first-child").attr("href");
		window.location = url;
	});
});
// -->
</script>

説明する必要があるほど長くないと思うけど、コメントでゼブラって書いている行は、行をしましまにするアレ。
次の行は、クリックターゲットを指定（"tbody td"を"#tableのid td"とかすると少し早くなるかも）して、それが押された時に、押された自分自身の（this）、親のtrの（parent("tr")）、子孫要素中のtdの中で最初に出現するアンカー（find()）のhrefアトリビュートを拾ってくる、ということをしています。

htmlも古くからある正しい書式で独自拡張なんかしてないし、完全にプログレッシブエンハンスメントで動作するし、ビューとモデルを適切に分離したコードになっていると思うし、クリック時以外にDOMをいじらないし、多少古いjQueryでも動くと思います。

いかがでしょう？