Перемещение списка выбора по кнопке

Question

Этот код предназначен для кнопки перемещения. Я хочу переместить выбранный список, когда я нажимаю кнопку вверх или вниз. Я просто скопировал источник функции с другого сайта. Я думаю, что это вариант selectbox. Я сделал массив для перемещения списка выбора, но я не мог получить значение, когда я назвал индекс. Как переместить список выбора вверх или вниз?

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

Я изменил все немного, чтобы сделать его более ясным, я нашел много таких вещей, как дивы и идентификаторами, чтобы ввести в заблуждение в объяснении, во всяком случае, мой пример поможет вам понять, вы можете добавить их снова:

CSS:

.selected{background: #7f7;} 

Javascript (JQuery) Я написал это полный JQuery, потому что короче, чище, и я люблю 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: Как я уже сказал, снял много элементов и немного изменил структуру, мне кажется яснее, но вы можете изменить его снова, когда понимаете логику. В основном я достал divs и назначил Id для самой таблицы и использовал ее в скрипте. И изменили стрелки в ссылках на кнопки, вы можете использовать ссылки, если хотите, вместо этого, если вы держите классы «перемещение, вверх и вниз», когда я использую их в скрипте.

<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="▼"/>