2

jQuery（またはPHP / Ajax）を使用してテーブルの2つのセルを並べ替える小さな関数を実行したいと思います。次の表があるとしましょう。

<table class="table">
    <tr>
        <td class="btn" data-cellN="1">
            01
        </td>
        <td class="btn" data-cellN="2">
            02
        </td>          
    </tr>

    <tr>
        <td class="btn" data-cellN="3">
            05
        </td>
        <td class="btn" data-cellN="4">
            06
        </td>
    </tr>
</table>

2つのセルを選択してそれらを並べ替える方法は？

編集：

それにもかかわらず、私はあなたのアドバイスのおかげで機能を通り抜けました。初めてバグが発生しました。c1c2c3変数から奇妙なバグが発生しました。理由はわかりませんが、誰かが関数を完成させるのを手伝ってくれませんか？

これが私のJavascriptです:(ドキュメントにラップされています）

        var nbbuttonclicked=0; // to trigger the movecell function after the second button was clicked
        var count=0; //Number of tinme we moved a cell

        var table = {

            c1:null,
            c2:null,
            c3:null,

            check: function(){
                $('td').on('click', function(){ //When the user click on a button we verify if he already clicked on this button

                    if( $(this).hasClass('btn-info') ) {

                        //If yes, then remove the class and variable c1
                        $(this).removeClass('btn-info');
                        table.c1=0;
                        nbbuttonclicked--;

                    }else{
                        //if no, then add a class to show him it is clicked and remember the value of the cell
                        $(this).addClass('btn-info');
                        if( typeof table.c1 === 'undefined' || table.c1===null) {
                            table.c1 = $(this);
                          console.log('c1:'+table.c1.html());
                        }else{
                            table.c2 = $(this);
                          console.log('c2:'+table.c2.html());
                        }

                        nbbuttonclicked++;

                        if( nbbuttonclicked==2 ) {
                            table.movecell(table.c1,table.c2); // we trigger the function to permute the values
                        }
                    }
                });
            },

            movecell: function(c1, c2){
                //We reset that variable for the next move
                nbbuttonclicked=0;

              //we move the cells
              table.c3=c1.html();
              c1.html(c2.html());
              c2.html(table.c3)

              c1.removeClass('btn-info');
              c2.removeClass('btn-info');
              table.c1=table.c2=table.c3=c1=c2=null;

            },

            // movecell: function(c1, c2){
                // We check if the cells.html() are = to data-cellN. If yes, you won
                // foreach()
            // },

            // var row = $('table tr:nth-child(1)')[0];
            // moveCell(row, 0, 3);
        };
        table.check();

サンプルは次のとおりです：http： //jsbin.com/exesof/2/edit

4

4 に答える 4

1

jQueryを使用すると、次のように実行できます。

$(document).ready(function() {

    $("table.table tbody tr td:first-child").each(function(index, element) {
    // this and element is the same    
    $(this).insertAfter($(this).next());
    });

});

tbody要素（デフォルトの動作として一部のブラウザによって自動的に追加される）を省略していないと仮定します

実例

最初のセルをクリックするときにプロセスを実行する場合はon、それぞれの代わりにクリックイベントを使用する必要があります。

$(document).ready(function() {

    $("table.table tbody tr td:first-child").on('click', function(clickEvent) {
        $(this).insertAfter($(this).next());
    });

});
于 2013-03-12T13:04:06.133 に答える
1

このコードを試してください：

var cell0,
    cell1,
    next,
    row0,
    row1;

$('td').on('click', function() {
  if(!cell0) {
    cell0 = this;
    row0 = cell0.parentNode;
    return;
  } else if(!cell1) {
    cell1 = this;
    row1 = cell1.parentNode;

    // === Switch cells ===
    next = cell0.nextSibling;
    row1.insertBefore(cell0, cell1);
    row0.insertBefore(cell1, next);
    // ====================

    row0 = row1 = cell0 = cell1 = next = null;
  }
});

ここで試すことができる実用的な例：http：//jsbin.com/irapeb/3/edit

別のセルよりもセルの1つをクリックして、それらが切り替わっていることを確認します:)

于 2013-03-12T14:43:55.263 に答える
1

このコードは、最初の行の最初のセル（）の代わりに4番目td（と呼ばれる）を移動します（1番目は4番目になります）。cell[3]cell[0]

function moveCell(row, c1, c2) {
    var cell = row.cells;
        arr = [c1, c2].sort(),
        c1 = arr[1],
        c2 = arr[0];
    row.insertBefore(row.insertBefore(cell[c1], cell[c2]).nextSibling, cell[c1].nextSibling);
}

var row = $('table tr:nth-child(1)')[0];
moveCell(row, 0, 3);

http://jsfiddle.net/2N2rS/3/

この関数は、プロセスを簡素化するために作成しました。ネイティブテーブルメソッドを使用します。

テーブルセルの行数（:nth-child(1)）とインデックスを変更すると、必要に応じてそれらを並べ替えることができます。

于 2013-03-12T13:00:15.693 に答える
0

これは純粋なJavaScriptで実行できます。

  1. クリックされた販売数を取得します。
  2. 両方のセルが選択されている場合は、それらのデータを取得します。
  3. セルの値を反対の値に置き換えます。
  4. ajax呼び出しを介してDBに新しい値を保存します。

スクリプトを作成するのはあなた次第です。

于 2013-03-12T12:58:53.013 に答える