0

このコードは移動ボタン用です。ボタンを上または下に押したときに、選択したリストを移動したい。他のサイトから関数ソースをコピーしました。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')">▲&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 に答える