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());

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

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));
});

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