気まぐれDeveloperブログ: GAEと戯れる 18 - スクロールするテーブル -

2015年2月28日土曜日

1. スクロール付きのテーブルを作る
MFCなんかでいうListCtrlみたいなもん?

ポイントは<table>の中に<table>を作るらしい。
内側のtableの属性がoverflow: autoを設定してやる。

例)

    <div id="list_area">

      <table id="tbl_outside">

        <caption>登録お店情報一覧</caption>

        <thead>

          <tr>

            <th width="3%">ID</th>

            <th width="12%">名前</th>

            <th width="15%">住所</th>

            <th width="10%">座標</th>

            <th width="10%">電話番号</th>

            <th width="10%">予約変更可能日</th>

            <th width="5%">前回ステータス</th>

            <th width="5%">前回参加人数</th>

            <th width="5%">前回総支出</th>

            <th width="25%">メモ</th>

          </tr>

        </thead>

        <tfoot>

          <tr>

            <td colspan="10">登録お店情報一覧</td>

          </tr>

        </tfoot>

        <tbody>

          <tr>

            <td colspan="10">

              <div style="height:300px; overflow:auto;">

                <table id="tbl_inside">

                  <c:forEach var="shop" items="${shops}">

                    <tr>

                      <td width="3%">${shop.key.id}</td>

                      <td width="12%">${shop.name}</td>

                      <td width="15%">${shop.address}</td>

                      <td width="10%">${shop.coordinate}</td>

                      <td width="10%">${shop.telephone}</td>

                      <td width="10%">${shop.checkDate}</td>

                      <td width="5%">${shop.lastStatus}</td>

                      <td width="5%">${shop.lastPartakeNum}</td>

                      <td width="5%">${shop.lastPayment}</td>

                      <td width="25%">${shop.memo}</td>

                    </tr>

                  </c:forEach>

                </table>              

              </div>

            </td>

          </tr>

        </tbody>

      </table>

    </div>

イメージ

参考サイト
http://javascript123.seesaa.net/article/103060039.html
関連
http://www12.plala.or.jp/costellazione/css-make/write.html
http://yume.hacca.jp/koiki/css/table/table.htm

2. 戻るボタンを作る
よくある前のページに戻るボタンを作ってみる。マウスをかざしたら絵が変わる。

戻る処理は
onclick=“history.back(); return false;”

マウスをかざしたら絵が変わるやつはjQueryを使用すると便利な事に!!

/**

 * 画像切り替え

*/

$(function(){

     $('a img').hover(function(){

        $(this).attr('src', $(this).attr('src').replace('_off', '_on'));

          }, function(){

             if (!$(this).hasClass('currentPage')) {

             $(this).attr('src', $(this).attr('src').replace('_on', '_off'));

}

});

});

自動で画像ファイルのon/off文字列を変更してくれる。便利〜。

例)

↓マウスをかざすと

気まぐれDeveloperブログ