jQueryで開閉する簡易メニュー

jQueryコアのみを前提とします。
記号クリックで、Hidden部分がニョロッと現れて、記号が変化します。
もう一度記号クリックで、Hidden部分が隠れて、記号も元に戻ります。

HTML側はこんな感じ。

<ul class="sidemenu">
    <li><a href="1">1</a>
    <li>2<a class="clickitem"></a>
        <ul class="submenu">
            <li><a href="2-1">2-1</a></li>
            <li><a href="2-2">2-2</a></li>
        </ul>
    </li>
    <li>3<a class="clickitem"></a>
        <ul class="submenu">
            <li>3-1<a class="clickitem"></a>
                <ul class="submenu">
                    <li><a href="3-1-1">3-1-1</a></li>
                </ul>
            </li>
         </ul>
    </li>
</ul>

css側で初期はHiddenにしています。

ul.sidemenu ul.submenu {
    display: none;
}

jquery側はこんな感じ。

$( function(){
    $("a.clickitem").click( function(){
        if($(this).parent().children("ul.submenu").is(":hidden")) {
            $(this).css("background-image","url(../img/arrow1_down.png)");
            $(this).parent().children("ul.submenu").slideDown("fast");
        } else {
            $(this).css("background-image","url(../imgarrow1_right.png)");
            $(this).parent().children("ul.submenu").slideUp("fast");
         }
    });
});

jQueryだけでTableのTrの追加削除をおこなう

追加する行のTemplateはtheadに保持しています。
ついでに、IDを連番で採番します。

こんなTableに対して

<table border="1" cellspacing="0">
<thead>
<tr><th>ID</th><th>名前</th><th></th></tr>
<tr class="template" style="display: none;">
    <td class="sid">template</td>
    <td><input type="text" name="txt_item[]" value="A" /></td>
    <td style="white-space: nowrap;">
    <input id="del_button" type="button" value="削除" /></td>
</tr>
</thead>
<tbody></tbody>
<tfoot>
<tr>
    <td colspan="3"><input id="add_button" type="button" value="追加" />
    <input id="remove_button" type="button" value="削除" /></td>
</tr>
</tfoot>
</table>

jQuery側はこんな感じ。

$(document).ready(function(){

$("#add_button").click(function(){
    var curTable = $(this).closest('table');
    var rowCount = curTable.find('tbody tr').length;
    var sid = 0;
    if(rowCount > 0) {
        curTable.find('tbody tr').each(function(){
            var cursid = Number($(this).find('td.sid').text());
	    if(sid < cursid) { sid = cursid; }
        });
    }
    sid = sid + 1;
    var tmplTr= curTable.find('thead > tr.template');
    curTable.find('tbody').append('<tr>' + tmplTr.html() + '</tr>');
    curTable.find('tbody tr:last td.sid').text(sid);
});

$("#remove_button").click(function(){
    $(this).closest('table').find('tbody tr:last').remove();
});

$("#del_button").live("click", function(){
    $(this).parent().parent().remove();
});

});