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

我已经改变了一切以使其更清晰，我发现很多像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：正如我所说，取消了很多元素并稍微改变了你的结构，对我来说似乎更清楚，但你可以在理解逻辑时再次修改它。基本上我拿出了div，并将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="▼"/>

按按钮移动选择列表

1 个答案: