Dreamweaver記事

Movable Type連携でソート可能なテーブルを自動更新

奇数・偶数行、選択した行、マウスオーバーした行にカラーリングを行う

次に、Spryテーブルに対してカラーリングなどのスタイル付けを行いましょう。

CSSファイルをリンクする

設定しやすくするために、挿入したSpryテーブルをいったん削除します。

奇数行、偶数行、マウスオーバー、選択に対応したクラスを作った下記のようなコードを記述したCSSをサイト内に用意します。

tr.evenRow {
     background-color:#FFFFCC;
}
tr.oddRow {
     background-color:#FFCCFF;
}
tr.hoverRow {
     color:#FFFFFF;
     background-color:#333333;
}
tr.selectRow {
     background-color:#006699;
     color: #FFFFFF;
}

このCSSファイルを、HTMLファイルにリンクします。

Spryテーブルの挿入

改めて、［挿入］バーの［Spry］タブの［Spryテーブル］をクリックして、［Spryテーブルの挿入］ダイアログボックスを開きます。
［奇数行クラス］、［偶数行クラス］、［Hoverクラス］、［クラスの選択］に対応する、クラスをポップアップメニューから選択していきます。

［OK］をクリックしてダイアログボックスを閉じ、ブラウザプレビューして確認します。
列をソートし直しても、基数行、偶数行にカラーリングされるようになります。

クリックした行や、マウスオーバーした行にもカラーリングが行われます。

ソースコードを確認しよう

body要素内でには、下記のように記述されています。

<div spry:region="ds1">
　<table>
　  <tr>
　    <th spry:sort="Vol">Vol</th>
　      <th spry:sort="開催日">開催日</th>
　      <th spry:sort="トピック">トピック</th>
　      <th spry:sort="スピーカー">スピーカー</th>
　    </tr>
　    <tr spry:repeat="ds1" spry:odd="oddRow" spry:even="evenRow" 
　         spry:hover="hoverRow" spry:select="selectRow">
　       <td>{Vol}</td>
　       <td>{開催日}</td>
　       <td>{トピック}</td>
　       <td>{スピーカー}</td>
　    </tr>
　</table>
</div>

つまり、XMLファイルを参照していているだけで、テキストは記述していません。XMLファイルのみを更新してアップロードすれば、このテーブルは自動更新されるのです。

なお、現状のバージョンではJavaScriptをオフにすると、XMLファイルは読み込まれず、2行目には{Vol}{開催日}のように表示されてしまいます。この問題については将来のバージョンで解消されるようです。