jqueryセルの相対位置は変更されません

jQuery を使用してテーブルを操作する場合、特定の条件に基づいてテーブル内の一部のセルの行と列の位置を変更する必要がある場合があります。ただし、テーブル全体の構造が破壊されないように、他のセルの相対位置が変更されないことを確認することも必要です。この記事では、jQuery を使用して、セルの位置を変更するときにセルの相対位置を変更しないようにする方法を説明します。

1. セルの位置情報を取得する

jQuery では、index() メソッドを使用して、親要素内の要素の位置インデックスを取得できます。たとえば、次のコードを使用して、現在の行の最初のセルのインデックスを取得できます。

$(this).index();

同様に、parent() メソッドを使用して行を取得することもできます。セルが配置されている場所、列要素、および index() メソッドを使用して位置インデックスを取得します。たとえば、次のコードは、現在のセルが配置されている行要素の位置インデックスを返します。

$(this).parent().index();

上記のメソッドは、テーブル内のセルの位置情報を取得して、後続の操作を容易にするのに役立ちます。

2. セルの位置を変更する

テーブル内の一部のセルの位置を変更する必要がある場合は、jQuery の insertBefore() と insertAfter を使用できます。 （）＃＃＃ 方法。これら 2 つのメソッドは、選択した要素をターゲット要素の前または後ろに移動します。

たとえば、次のコードは、現在のセルを次のセルの前に移動します:

$(this).insertBefore($(this).next());

同様に、次のコードは、現在のセルを前のセルの後ろに移動します。

$(this).insertAfter($(this).prev());

上記の方法はセルの位置を変更するのに役立ちますが、他のセルの位置が変更され、テーブル全体の構造が破壊される可能性があります。次に、jQuery を使用してテーブル内の他のセルの相対位置を変更しないようにする方法を示します。

3. セルの相対位置を変更しないでください

テーブル内の他のセルの相対位置を変更しないようにするには、次の方法を使用できます:

各セルの位置情報をキャッシュする

セルを移動する前に、行と列の位置インデックスを含むテーブル内の各セルの位置情報をキャッシュする必要があります。後続の操作中に使用されます。これを実現するには、次のコードのようなメソッドを使用します。

var cells = [];
$('td').each(function() {
    var cell = {};
    cell.columnIndex = $(this).index();
    cell.rowIndex = $(this).parent().index();
    cells.push(cell);
});

上記のコードは、テーブル内の各セルの行と列の位置インデックスを取得し、後で使用できるように配列に格納します。

セルの位置を再配置する

各セルの位置情報をキャッシュした後、セルの移動操作を実行できます。ただし、

insertBefore() メソッドまたは insertAfter() メソッドを実行する前に、セルの位置情報に従って順序を並べ替える必要があります。これを実現するには、次のコードを使用します。

cells.sort(function(cell1, cell2) {
    if(cell1.rowIndex == cell2.rowIndex) {
        return cell1.columnIndex - cell2.columnIndex;
    }
    return cell1.rowIndex - cell2.rowIndex;
});

$.each(cells, function(index, cell) {
    var targetIndex = cell.rowIndex * $('tr').eq(0).children().length + cell.columnIndex;
    $('td').eq(index).detach().insertBefore($('td').eq(targetIndex));
});

上記のコードは、セルが移動しても相対位置が変わらないように、テーブル内の各セルの位置を再配置します。

4. 概要

jQuery を使用してテーブルを操作する場合、セルの位置を変更することは一般的な要件です。ただし、テーブルの全体的な構造を維持するには、他のセルの相対的な位置が変更されないようにする必要があります。各セルの位置情報をキャッシュし、セルの順序を並び替えることで、セルの位置を変更した際にセルの相対位置を変化させない機能を簡単に実装できます。

以上がjqueryセルの相対位置は変更されませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。