通过按钮移动选择列表

Question

此代码用于移动按钮。当我按下按钮时，我想要移动选定的列表。 我刚刚从其他网站复制功能源。我认为这是用于选择框选项。我创建了一个数组来移动一个选择列表，但是当我调用一个索引时，我无法获得一个值。 如何将选择列表向上或向下移动？

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

我已经改变了一切有点使其更清晰，我发现很多事情一样的div和id的是在解释混乱，反正我的例子会帮助你了解，你可以再次添加它们：

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