jQuery テーブル操作をしてみた

Tweet

Share on Tumblr

jQuery テーブル操作 | Bamboo lath 日々の記録jQueryで初めてテーブル操作とかをしてみたのでメモ。

実際に作ったものはこれ

要素の取得とかがまだこなれていない・・・。

jQuery部分はこんな感じ。※必要なところだけ抜粋。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
    var table =$('table#category_tbl');
    var category = $('#category');

    // 追加時の挙動
    $('#btn_add').click(function(){
        if(category.val()) {
        var id_td='<td></td>';
        var category_td='<td>'+category.val()+'</td>';
        var category_change_td='<td><input type="text" name="c_change"><button class="categoryChange">変更</button></td>';
        var open_td='<td><input type="checkbox" name="open_flag" value="1" checked>公開する</td>';
        var priority_td='<td><button class="up">up</button> <button class="down">down</button></td>';
        var del_td='<td><button class="deleteButton">削除</button</td>';
        var rowData ="<tr>"+id_td+category_td+category_change_td+open_td+priority_td+del_td+"</tr>";
        $('table#category_tbl tr:last-child').after(rowData);
        category.val('');
        }
        return false;
        });

    // 削除
    $('.deleteButton').live('click',function(event){
            $(this).parent().parent().remove();
            });

    // 名の変更
    $('.categoryChange').live('click',function(event){
            if($(this).prev().val()) {
            $(this).parent().prev().text($(this).prev().val());
            $(this).prev().val('');
            }
            });

    // up
    $('.up').live('click',function(event){
            var own = $(this).parent().parent();
            var pre = own.prev();
            own.insertBefore(pre);
            });

    // down
    $('.down').live('click',function(event){
            var own = $(this).parent().parent();
            var nex = own.next();
            own.insertAfter(nex);
            });

});
</script>

html部分。※必要なところだけ抜粋。

<div class="cms-table">
    <table id="category_tbl" border="1">
        <tr>
            <th>id</th>
            <th>タグ名</th>
            <th>タグ名変更</th>
            <th>公開</th>
            <th>並び順</th>
            <th>削除</th>
        </tr>
        <tr>
            <td>2</td>
            <td>人気</td>
            <td><input type="text" name="c_change"/><button class="categoryChange">変更</button></td>
            <td><input type="checkbox" name="open_flag" value="1" checked/>公開する</td>
            <td><button class="up">up</button>&nbsp;<button class="down">down</button></td>
            <td><button class="deleteButton">削除</button></td>
        </tr>
        <tr>
            <td>3</td>
            <td>シンプル</td>
            <td><input type="text" name="c_change"/><button class="categoryChange">変更</button></td>
            <td><input type="checkbox" name="open_flag" value="1" checked/>公開する</td>
            <td><button class="up">up</button>&nbsp;<button class="down">down</button></td>
            <td><button class="deleteButton">削除</button></td>
        </tr>
    </table>
</div><!-- cms-table -->
<div class="cms-btn-area">
    タグ名：<input type="text" id="category" name="category"/>
    <button id="btn_add">仮追加</button>
</div>

実際の利用では変更を確定するためにjQueryを使ってpostしてみたりする。
jQueryは便利だなー。
参考URL
2011-02-11 テーブル要素の追加と削除練習
【JavaScript】jQueryでテーブルを操作、編集