通過按鈕移動選擇列表

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