jQueryを使ったテーブルのアコーディオンのように列を広げるスクリプト[js]

table0907251.jpg

jExpand pluginより、jQueryを使ったテーブルのアコーディオンのように列を広げるスクリプトの紹介です。

デモページはこちらから

設置方法はファイルをダウンロードし、CSSとjQueryを設置するだけです。

HTMLのマークアップの例は下記のようになります。

<table id="report">
    <tr>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
        <th>Lorem ipsum</th>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td colspan="4">
            <!-- Details here -->  
        </td>
    </tr>
    <tr>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
        <td>Lorem ipsum</td>
    </tr>
    <tr>
        <td colspan="4">
            <!-- Details here -->  
        </td>
    </tr>
</table>

CSSは下記のようになります。

#report { border-collapse:collapse;}
#report h4 { margin:0px; padding:0px;}
#report img { float:right;}
#report ul { margin:10px 0 10px 40px; padding:0px;}
#report th { background:#7CB8E2 url(header_bkg.png) repeat-x scroll center left; color:#fff; padding:7px 15px; text-align:left;}
#report td { background:#C7DDEE none repeat-x scroll center left; color:#000; padding:7px 15px; }
#report tr.odd td { background:#fff url(row_bkg.png) repeat-x scroll center left; cursor:pointer; }
#report div.arrow { background:transparent url(arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px; display:block;}
#report div.up { background-position:0px 0px;}

jQueryのソースは下記のようになります。

$("#report tr:odd").addClass("master");
$("#report tr:not(.master)").hide();
$("#report tr:first-child").show();
$("#report tr.master").click(function(){
    $(this).next("tr").toggle();
    $(this).find(".arrow").toggleClass("up");
});

応用すれば、テーブル以外の要素にも使えそうです。