2

以下のようなテーブル構造を持っている jQuery セレクターに関する問題があります ( HTML 部分)。jQuery を使用してクリックしてテーブル行を「上」および「下」に移動するためのテーブル列にリンクがあります ( jQuery 部分、この投稿からの参照）。

jQuery部分：

 $(".up,.down").click(function() {
    var row = $(this).parents("tr:first");
    if ($(this).is(".up")) {
        row.insertBefore(row.prev("tr:has(td)"));
    } else {
        row.insertAfter(row.next());
    }
});

HTML 部分 :

 <table cellspacing="0" border="0" id="Table1" style="text-align:center" >
    <tr>
        <th scope="col" width="80px">Column A</th><th scope="col" width="80px">Column B</th><th scope="col">&nbsp;</th>
    </tr>
    <tr>
        <td>
                <span id="GridView1_ctl02_lbl1">A</span>
            </td><td>
                <span id="GridView1_ctl02_lbl2">0</span>
            </td><td>
                <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
            </td>
    </tr><tr>
        <td>
                <span id="GridView1_ctl03_lbl1">B</span>
            </td><td>
                <span id="GridView1_ctl03_lbl2">2</span>
            </td><td>
                <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
            </td>
    </tr><tr>
        <td>
                <span id="GridView1_ctl04_lbl1">C</span>
            </td><td>
                <span id="GridView1_ctl04_lbl2">2</span>
            </td><td>
            </td>
    </tr><tr>
        <td>
                <span id="GridView1_ctl05_lbl1">D</span>
            </td><td>
                <span id="GridView1_ctl05_lbl2">2</span>
            </td><td>
            </td>
    </tr><tr>
        <td>
                <span id="GridView1_ctl06_lbl1">E</span>
            </td><td>
                <span id="GridView1_ctl06_lbl2">3</span>
            </td><td>
                <a href="#" class="up">Up</a> <a href="#" class="down">Down</a>
            </td>
    </tr>
</table>

通常の行ごとではなく、「列 B」の値によって行を「上」および「下」に移動したかった(赤いボックスで強調表示されているように)。図の例に基づいて、行の移動は赤いボックスで移動します。

ここに画像の説明を入力

だから私の質問は、jQueryセレクターを使用して、「列B」の値で行グループを選択するにはどうすればよいですか? リンク（「上」および「下」）クリックで onclick イベントがトリガーされたもの。

よろしくお願いします:)

4

2 に答える 2

3

セレクターと単一のコマンドだけでこれを行うことはできないと思います! しかし、いくつかのループを使用できます:

 $(".up,.down").click(function () {
     var row = $(this).parents("tr:first");
     if ($(this).is(".up")) {

         myRow = row;
         prevRow = row.prev("tr");

         currentValue = myRow.children("td").eq(1).text();
         prevValue = prevRow.children("td").eq(1).text();
         parNode = myRow.parent();

         i = 0;
         family = [];
         parNode.children("tr").each(function(){
             if($(this).children("td").eq(1).text() == currentValue){
                 family[i] =  $(this);
                 i++;
             }
         });

         for(var j = 0; j <= i; j++ ){
             while(prevRow.children("td").eq(1).text() == prevValue){
                prevRow = prevRow.prev("tr");
             }
             family[j].insertAfter(prevRow);
         }

     } else {
         row.insertAfter(row.next());
     }
 });

デモはこちら: http://jsfiddle.net/shahverdy/PSDEs/2/ このデモでは、 のみを実装しましたUp。Up値2と3をクリックして、その動作を確認します。

于 2013-03-23T08:38:52.310 に答える
1

上記のテーブル構造を考えると、列 B に同じ値を持つすべての行が隣接している場合、(列 b の値、対応するtr配列)ペアを格納するマップを作成できます。Up/Downリンクをクリックすると、同じ値を持つすべての行を切り離し、上 ( Upの場合) または下 ( Downの場合) の行を取得します。次に、これらの分離された行をどこに接続するかがわかります。

$(function() {
    var column_index = 1;
    function get_value(tr) {
        return $('td', tr).eq(column_index).text().trim();
    }
    function group_by(trs, column_index) {
        var map = {};
        trs.each(function (idx) {
            var value = get_value($(this));
            if (map[value])
                map[value].push($(this));
            else
                map[value] = [$(this)];
        });
        return map;
    }
    var map = group_by($('#Table1 tr:gt(0)'), column_index);

    $('a.up').click(function () {
        var tr = $(this).closest('tr');
        var value = get_value(tr);
        var group = map[value];
        var prev = group[0].prev('tr');
        if (prev.length == 0 || $('th', prev).length != 0)
            return;
        var prev_value = get_value(prev);
        var prev_group = map[prev_value];
        for (var i = 0; i < group.length; i++) {
            group[i].detach();
            prev_group[0].before(group[i]);
        }
    });

    $('a.down').click(function () {
        var tr = $(this).closest('tr');
        var value = get_value(tr);
        var group = map[value];
        var next = group[group.length - 1].next('tr');
        if (next.length == 0)
            return;
        var next_value = get_value(next);
        var next_group = map[next_value];
        for (var i = group.length - 1; i >= 0; i--) {
            group[i].detach();
            next_group[next_group.length - 1].after(group[i]);
        }
    });
});

jsFiddleのコード例を参照してください。

サーバー エンドでテーブルを動的に生成する場合は、SQL またはサーバー エンド言語でグループを作成し、いくつかのクラスを にアタッチしてtr、グループを識別することをお勧めします。

于 2013-03-23T09:17:38.133 に答える