move table rows with jquery

by Seungrae Lee

HTML

<table cellspacing="0" cellpadding="0">
    <tr>
        <td>
            <table id="hlist" cellspacing="1" cellpadding="2">
                <tr>
                    <th>LIST_CODE</th>
                    <th>LIST_OUT</th>
                    <th>LIST_OUT_ENG</th>
                    <th>LIST_NAME</th>
                </tr>
            </table>
        </td>
    </tr>
    <tr>
        <td>
            <table id="listTbl" cellspacing="1" cellpadding="2">
                <tr class="unhighlight">
                    <td>
                        <input type="text" name="entry[0].listCode" value="10100" />
                    </td>
                    <td>
                        <input type="text" name="entry[0].listOut" value="－－" />
                    </td>
                    <td>
                        <input type="text" name="entry[0].listOutEng" value="－－" />
                    </td>
                    <td>
                        <input type="text" name="entry[0].listName" value="難易度" />
                    </td>
                </tr>
                <tr class="unhighlight">
                    <td>
                        <input type="text" name="entry[1].listCode" value="10101" />
                    </td>
                    <td>
                        <input type="text" name="entry[1].listOut" value="A" />
                    </td>
                    <td>
                        <input type="text" name="entry[1].listOutEng" value="A" />
                    </td>
                    <td>
                        <input type="text" name="entry[1].listName" value="難易度A" />
                    </td>
                </tr>
                <tr class="unhighlight">
                    <td>
                        <input type="text" name="entry[2].listCode" value="10102" />
                    </td>
                    <td>
                        <input type="text" name="entry[2].listOut" value="B" />
                    </td>
                    <td>
       ...

CSS

#listTbl, #hlist {
    font-size: 10pt;
}
#listTbl tr {
    height: 25px;
}
#listTbl th {
    text-align: center;
}
#tbl1 {
    font-size: 10pt;
    margin: 10px 0px;
}
#tbl1 td {
    text-align: center;
}
#messages {
    color: #f00;
}
.highlight {
    background-color: #C0FF85;
}
.unhighlight {
    background-color: #eee;
}
#listTbl input {
    text-align: left;
    font-size: 10pt;
    padding: 3px;
    margin: 2px;
    border: 0px;
}
#hlist tr {
    background-color: #eee;
}

JavaScript

$(function () {
    // click tr
    $('#listTbl tr').click(function () {
        $('#listTbl tr').removeClass('highlight').addClass('unhighlight');
        $(this).removeClass('unhighlight').addClass('highlight');

        toggleButton($(this));
    });

    // move up
    $('input[type="button"][value="Up"]').click(function () {
        var target = $('#listTbl .highlight');
        if (target.length == 0) return false;
        var rowIndex = target[0].rowIndex;

        // renumber rowIndex
        target.find('td:nth-child(1)').children().attr('name', 'entry[' + (rowIndex - 1) + '].listCode');
        target.prev().find('td:nth-child(1)').children().attr('name', 'entry[' + rowIndex + '].listCode');
        // insert row
        target.insertBefore(target.prev());
        toggleButton(target);
    });

    // move down
    $('input[type="button"][value="Down"]').click(function () {
        var target = $('#listTbl .highlight');
        if (target.length == 0) return false;
        var rowIndex = target[0].rowIndex;

        // renumber rowIndex
        target.find('td:nth-child(1)').children().attr('name', 'entry[' + (rowIndex + 1) + '].listCode');
        target.next().find('td:nth-child(1)').children().attr('name', 'entry[' + rowIndex + '].listCode');
        // insert row
        target.insertAfter(target.next());
        toggleButton(target);
    });

    // delete
    $('input[type="button"][value="Delete"]').click(function () {
        var target = $('#listTbl .highlight'),
            rowIndex = target[0].rowIndex;

        // renumber rowIndex
        $('#listTbl tr:gt(' + rowIndex + ')').each(function () {
            var rowIndex = $(this)[0].rowIndex;
            $(this).find('td').each(function () {
                $(this).children().attr('name', 'entry[' + (rowIndex - 1) + '].listCode');
            });
        });
        target.remove();
    });

    // Add
    $('input[type="button"][value="Add"]').click(function () {
        // insert position
...