Question

This code is for the move button. I want to move a selected list when I hit a button either up or down.
I just copied the function source from the other site. I think it’s for selectbox option. I made array to move a select list, but I could not get a value when I called a index.
How can I move a select list to up or down??

    function op() {
                    $('div#selReporterList table tr:has(td)').click(function() {
                        $('.selected').removeClass('selected');
                        $('.selected').addClass('deselected');
                        $(this).addClass('selected'); 
                    });  
                };



function menuMove(id,mode) {
    var obj = document.getElementById(id);
        var idx = obj.selectedIndex;
        if (idx < 0) idx = obj.selectedIndex = 0;
        var opt = obj.options[obj.selectedIndex];

        switch (mode) {
            case 'up':
                if (idx > 0) obj.insertBefore(opt, obj.options[idx-1]);
                alert(obj.insertBefore(opt, obj.options[idx-1]).innerHTML);
                break;
            case 'down':
                if (idx < obj.options.length-1) obj.insertBefore(obj.options[idx+1], opt);
                break;
        }
    }




<div id="selReporterList" class="srList">
<div>
<table id="list" cellspacing="0" border="1" style="border-collapse: collapse;">
<tr disabled class="nameMail" bgcolor =#EAEAEA>
<td>reporter</td>
<td>email</td>
</tr>
<tr class="nameMail" onclick='op()'>
<td value='a'>a</td>
<td value='b'>b</td>
</tr>
<tr class="nameMail" onclick='op()'>
<td value='c'>c</td>
<td value='d'>d</td>
</tr>
<tr class="nameMail" onclick='op()'>
<td value='e'>e</td>
<td value='f'>f</td>
</tr>
</table>
<td>
<span class="bu_gray hand"><a href="javascript:menuMove('list','up')">▲</a></span>
<span class="bu_gray hand"><a href="javascript:menuMove('list','down')">▼</a></span>
</td>
</div>
</div>

Answer 1

I have changed everything a bit to make it clearer, I found a lot of things like divs and id’s to be confusing in the explanation, anyway my example will help you to understand, you can add them again:

css:

.selected{background: #7f7;}

javascript(jQuery) I have written it full jQuery, because is shorter, cleaner, and I love jQuery:

$(document).ready(function(){
    var total = $('#selReporterList tr').size(); // Total rows of the table

    // With not(:first-child) you avoid selecting the table header, instead of having that row disabled, which looked weird.
    $('#selReporterList tr:not(:first-child)').click(function() {
        $('.selected').removeClass('selected');
        $(this).addClass('selected');
    });

    //We bind the click to the move buttons
    //Calling a script from the href is wrong and ugly
    //Normally it should be from onClick="javascript:...
    //But I like to bind it like this because it looks clearer/cleaner to me  
    $('.move').click(function(){
        var obj = $('.selected'); //We get the selected item
        var idx = $(obj).index(); //And its DOM index

        //This is the pretty part, look how easy it is with jQuery:
        if($(this).hasClass('up') && idx > 1) $(obj).prev().before(obj);

        if($(this).hasClass('down')) $(obj).next().after(obj);
    });
});

html: As I said, took off a lot of elements and changed your structure a bit, seems clearer to me but you can modify it back again as you understand the logic. Basically I took out the divs, and assigned the Id to the table itself, and used it in the script. And changed the arrows in the links for buttons, you can use links if you want instead if you keep the “move, up and down” classes as I am using them in the script.

<table id="selReporterList" cellspacing="0" cellpadding="5" border="1" style="border-collapse: collapse;">
    <tr class="nameMail" bgcolor="#EAEAEA"  >
        <td>reporter</td>
        <td>email</td>
    </tr>
    <tr class="nameMail">
        <td value='a'>a</td>
        <td value='b'>b</td>
    </tr>
    <tr class="nameMail">
        <td value='c'>c</td>
        <td value='d'>d</td>
    </tr>
    <tr class="nameMail">
        <td value='e'>e</td>
        <td value='f'>f</td>
    </tr>
    <tr class="nameMail">
        <td value='g'>g</td>
        <td value='h'>h</td>
    </tr>
    <tr class="nameMail">
        <td value='i'>i</td>
        <td value='j'>j</td>
    </tr>
    <tr class="nameMail">
        <td value='k'>k</td>
        <td value='l'>l</td>
    </tr>
    <tr class="nameMail">
        <td value='m'>m</td>
        <td value='n'>n</td>
    </tr>
    <tr class="nameMail">
        <td value='o'>o</td>
        <td value='p'>p</td>
    </tr>
    <tr class="nameMail">
        <td value='q'>q</td>
        <td value='r'>r</td>
    </tr>
</table>

<input type="button" class="move up" value="▲" />
<input type="button" class="move down" value="▼"/>