kedudukan relatif sel jquery kekal tidak berubah

Apabila menggunakan jQuery untuk beroperasi pada jadual, kita mungkin perlu menukar kedudukan baris dan lajur beberapa sel dalam jadual berdasarkan keadaan tertentu. Walau bagaimanapun, adalah perlu juga untuk memastikan bahawa kedudukan relatif sel lain kekal tidak berubah untuk memastikan struktur keseluruhan jadual tidak dimusnahkan. Artikel ini akan menunjukkan kepada anda cara menggunakan jQuery untuk memastikan kedudukan relatif sel tidak berubah apabila menukar kedudukannya.

1. Dapatkan maklumat kedudukan sel

Dalam jQuery, kita boleh menggunakan kaedah index() untuk mendapatkan indeks kedudukan elemen dalam elemen induknya. Sebagai contoh, kita boleh menggunakan kod berikut untuk mendapatkan indeks sel pertama dalam baris semasa:

$(this).index();

Begitu juga, kita juga boleh menggunakan kaedah parent() untuk mendapatkan elemen baris dan lajur di mana sel terletak, dan gunakan kaedah index() untuk mendapatkan indeks kedudukan mereka. Contohnya, kod berikut akan mengembalikan indeks kedudukan elemen baris di mana sel semasa berada:

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

Kaedah di atas boleh membantu kami mendapatkan maklumat kedudukan sel dalam jadual untuk memudahkan operasi seterusnya.

2. Tukar kedudukan sel

Apabila kita perlu menukar kedudukan sel tertentu dalam jadual, kita boleh menggunakan kaedah insertBefore() dan insertAfter() jQuery. Kedua-dua kaedah ini menggerakkan elemen yang dipilih di hadapan atau di belakang elemen sasarannya.

Sebagai contoh, kod berikut akan mengalihkan sel semasa ke hadapan sel seterusnya:

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

Begitu juga, kod berikut akan mengalihkan sel semasa ke belakang sel sebelumnya:

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

Kaedah di atas boleh membantu kita menukar kedudukan sel, tetapi ia boleh menyebabkan perubahan dalam kedudukan sel lain, seterusnya memusnahkan struktur keseluruhan jadual. Seterusnya, kami akan menunjukkan kepada anda cara menggunakan jQuery untuk memastikan kedudukan relatif sel lain dalam jadual tidak berubah.

3 Pastikan kedudukan relatif sel tidak berubah

Untuk memastikan kedudukan relatif sel lain dalam jadual tidak berubah, kita boleh menggunakan kaedah berikut:

1. Maklumat Kedudukan Cache bagi setiap sel

Sebelum mengalihkan sel, kita perlu cache maklumat kedudukan setiap sel dalam jadual, termasuk indeks kedudukan baris dan lajur, supaya ia boleh digunakan semasa penggunaan operasi seterusnya. Kita boleh menggunakan kaedah yang serupa dengan kod berikut untuk mencapai ini:

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

Kod di atas akan memperoleh indeks kedudukan baris dan lajur setiap sel dalam jadual dan menyimpannya dalam tatasusunan untuk kegunaan seterusnya.

2. Susun semula kedudukan sel

Selepas menyimpan maklumat kedudukan setiap sel, kami boleh melakukan operasi pergerakan sel. Walau bagaimanapun, sebelum melaksanakan kaedah insertBefore() atau insertAfter(), kita perlu menyusun semula susunannya mengikut maklumat kedudukan sel. Ini boleh dicapai menggunakan kod berikut:

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

Kod di atas akan menyusun semula kedudukan setiap sel dalam jadual untuk memastikan kedudukan relatif kekal tidak berubah apabila sel dialihkan.

4. Ringkasan

Apabila menggunakan jQuery untuk mengendalikan jadual, menukar kedudukan sel adalah keperluan biasa. Tetapi untuk mengekalkan struktur keseluruhan jadual, kita perlu memastikan bahawa kedudukan relatif sel lain kekal tidak berubah. Dengan menyimpan maklumat kedudukan setiap sel dan menyusun semula susunan sel, kita boleh dengan mudah melaksanakan fungsi mengekalkan kedudukan relatif sel tidak berubah apabila menukar kedudukan sel.

Atas ialah kandungan terperinci kedudukan relatif sel jquery kekal tidak berubah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!