Result
http://jsfiddle.net/kachibito/gmb65/3/embedded/result,js,css,html
jQuery
$(document).ready(function() { //tr要素をクリックでイベント発火 $('table tr').click(function() { //td要素からチェックボックスを探す var $c = $(this).children('td').children('input[type=checkbox]'); if($c.prop('checked')) $c.prop('checked', ''); else $c.prop('checked', 'checked'); }); });
css
table { margin-left: auto; margin-right: auto; width: 80%; border-collapse: collapse; background: #fff; border-top:1px solid #ddd; } table tr td, table tr th { padding: 10px; vertical-align: top; text-align: left; } table tr th { background: #ddd ; color: #555; font-weight: bold; } table tr td { cursor: pointer; border-bottom:1px solid #ddd; } table tr:hover { background: #323232 ; color: #fff; } a, a:visited { text-decoration: none; color: #000; } a:hover{color: #fff;}
html
<table> <tr> <td><input type="checkbox" /></td> <td>Chrome</td> <td><a href="http://www.google.co.jp/chrome/">http://www.google.co.jp/chrome/</a></td> <td>★★★★★</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Firefox</td> <td><a href="http://mozilla.jp/firefox/">http://mozilla.jp/firefox/</a></td> <td>★★★★★</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Safari</td> <td><a href="http://www.apple.com/jp/safari/">http://www.apple.com/jp/safari/</a></td> <td>★★★★☆</td> </tr> <tr> <td><input type="checkbox" /></td> <td>Opera</td> <td><a href="http://jp.opera.com/">http://jp.opera.com/</a></td> <td>★★★★☆</td> </tr> </table>