[JS]表データの列と行をハイライトするスクリプト -TargetTable
Post on:2010年2月22日
sponsors
表データのセルにカーソルをあわせると、その列と行をハイライトするシンプルなスクリプトをPreeoStudiosから紹介します。
スクリプトのセットアップは簡単で、既存の表データにも簡単に反映できます。
HTML
tableに「class="targettable"」を記述します。
|
1 2 3 |
<textarea name="code" class="html" cols="60" rows="5"> <table class="targettable" width="100%" border="1"> </textarea> |
JavaScript
スクリプト本体を外部スクリプトで記述し、ハイライトするカラーを指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<textarea name="code" class="html" cols="60" rows="5"> <script type="text/javascript" src="jquery.targettable.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".targettable").targetTable({ rowBgColor: "#50b05E", rowTextColor: "#000", columnBgColor: "#ccc", columnTextColor: "#000", targetBgColor: "#00cccc", targetTextColor: "#fff" }); }); </script> </textarea> |
カラーの指定は、rowBgColorが列、columnBgColorが行、targetBgColorがセルの三つです。
TargetTableはjQueryのプラグインのため、実装にはjquery.jsが必要です。
sponsors
