在使用 jQuery 對表格進行操作時，我們可能需要根據特定的條件來改變表格中的一些儲存格的行和列位置。但是，同時也需要確保其他單元格的相對位置不變，以確保表格整體的結構不會被破壞。本文將介紹如何使用 jQuery 在改變單元格位置時保持其相對位置不變。
一、取得單元格位置資訊
在 jQuery 中，我們可以使用 index() 方法來取得元素在其父級元素中的位置索引。例如，我們可以使用以下程式碼來取得第一個單元格在目前行中的索引：
$(this).index();
同樣地，我們也可以使用parent() 方法來取得單元格所在的行、列元素，並用index() 方法來取得它們的位置索引。例如，以下程式碼將傳回目前儲存格所在行元素的位置索引：
$(this).parent().index();
以上方法可以幫助我們取得儲存格在表格中的位置信息，以便於後續的操作。
二、改變單元格位置
當需要改變表格中某些單元格的位置時，我們可以使用jQuery 的insertBefore() 和insertAfter () 方法。這兩個方法可以將選定的元素移動到其目標元素的前面或後面。
例如，以下程式碼將把目前儲存格移到下一個儲存格的前面：
$(this).insertBefore($(this).next());
同樣地，以下程式碼將把目前儲存格移到上一個儲存格的後面：
$(this).insertAfter($(this).prev());
以上方法可以幫助我們改變儲存格的位置，但可能會導致其他儲存格位置的變化，從而破壞表格的整體結構。接下來，我們將介紹如何使用 jQuery 保持表格其他儲存格的相對位置不變。
三、保持單元格相對位置不變
為了保持表格中其他單元格的相對位置不變，我們可以使用以下方法：
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中文網其他相關文章！
