0

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

    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')">▲&lt;/a></span>
<span class="bu_gray hand"><a href="javascript:menuMove('list','down')">▼&lt;/a></span>
</td>
</div>
</div>
4

1 回答 1

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="▼"/>
于 2012-11-27T10:17:12.490 回答