まだデータがありません。
マウスオーバーでテーブルに照準を「Cross Hairs」
当ページのリンクには広告が含まれています。
スポンサーリンク
マウスオーバーでテーブルに照準をつけてくれるプラグイン「Cross Hairs」を紹介します。
jQueryプラグイン「Cross Hairs」
このプラグインを使えば、マウスオーバーするとクロス（十字）の照準をテーブルに付加することができます。
「行の項目」と「列の項目」を見合わせる必要があるようなでっかいテーブルには便利なプラグインですね。
例えば、「九九の表」とかでしょうか。
スポンサーリンク
それでは、デモページのテーブルをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Crosshairs のデモでーす。">
<title>Crosshairs - jQueryプラグイン</title>
<style>
.rowHighlight {
background-color: blue;
}
.columnHighlight {
background-color: blue;
}
</style>
</head>
<body>
<h1>Crosshairs のデモでーす</h1>
<table width="100%" cellspacing="0" class="tbl">
<tbody>
<td></td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<tr>
<td>1</td>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>4</td>
<td>6</td>
<td>8</td>
<td>10</td>
<td>12</td>
<td>14</td>
<td>16</td>
<td>18</td>
</tr>
<tr>
<td>3</td>
<td>3</td>
<td>6</td>
<td>9</td>
<td>12</td>
<td>15</td>
<td>18</td>
<td>21</td>
<td>24</td>
<td>27</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>8</td>
<td>12</td>
<td>16</td>
<td>20</td>
<td>24</td>
<td>28</td>
<td>32</td>
<td>36</td>
</tr>
<tr>
<td>5</td>
<td>5</td>
<td>10</td>
<td>15</td>
<td>20</td>
<td>25</td>
<td>30</td>
<td>35</td>
<td>40</td>
<td>45</td>
</tr>
<tr>
<td>6</td>
<td>6</td>
<td>12</td>
<td>18</td>
<td>24</td>
<td>30</td>
<td>36</td>
<td>42</td>
<td>48</td>
<td>54</td>
</tr>
<tr>
<td>7</td>
<td>7</td>
<td>14</td>
<td>21</td>
<td>28</td>
<td>35</td>
<td>42</td>
<td>49</td>
<td>56</td>
<td>63</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
<td>16</td>
<td>24</td>
<td>32</td>
<td>40</td>
<td>48</td>
<td>56</td>
<td>64</td>
<td>72</td>
</tr>
<tr>
<td>9</td>
<td>9</td>
<td>18</td>
<td>27</td>
<td>36</td>
<td>45</td>
<td>54</td>
<td>63</td>
<td>72</td>
<td>81</td>
</tr>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.crosshairs.js"></script>
<script>
$(".tbl").crosshairs();
</script>
</body>
</html>
スポンサーリンク