Jquery 按按钮移动选择列表

此代码用于“移动”按钮。我想在按下按钮时向上或向下移动选定列表。 我刚刚从另一个站点复制了函数源。我认为这是选择框选项。我创建了一个数组来移动一个选择列表，但在调用索引时无法获取值。 如何将选择列表上移或下移

    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>

---

我对所有内容都做了一些修改以使其更清晰，我发现在解释中有很多像div和id这样的东西令人困惑，无论如何，我的示例将帮助您理解，您可以再次添加它们：

css:

javascriptjQuery我编写了完整的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：正如我所说，去掉了很多元素并稍微改变了结构，对我来说似乎更清楚，但你可以在理解逻辑后再次修改它。基本上，我取出div，将Id分配给表本身，并在脚本中使用它。并更改了按钮链接中的箭头，如果您想使用链接，您可以使用链接，如果您在脚本中使用move、up和down类，则可以使用链接

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

---

我不太明白你的问题，但我很感兴趣。是否要移动实际选择？或者突出显示列表中的上一项/下一项？我很困惑，因为你有一个表而不是一个选择。如果将“选择”下拉列表设置为“MultileSorry”，可能会更容易。我没有设置要选择的函数。OP是选择一个列表。我想移动所选列表。我更新了它。所以功能是，我点击包含c和d的行，并使用箭头将其放在a | b之前或e | f之后？这就是你想要实现的吗？是的！这是正确的！我需要点击按钮来移动它我正在玩一点，将在短时间内回复你我尝试了你的代码，但我无法选择一个列表。它在IE9上工作吗？是的，我刚刚在chrome和IE9上试过，并且在两者上都能工作，证明：确保您正在加载jquery库，在JSFIDLE中它使用的是1.8.2版，并且工作正常。我是否需要输入code.jquery.com/jquery-1.8.2.js>来加载jquery库？？无论如何非常感谢~！我在JSFIDLE上检查了您的代码，它非常有效！！我想我可以修改我的代码来做到这一点。是的，你需要添加它来让jQuery工作，或者使用谷歌托管的版本：我推荐它，因为它很快，或者下载实际的js并将其托管在你的文件夹中。我在开发过程中这样做，因为这是最快的加载时间

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