jquery 셀 상대 위치는 변경되지 않습니다.-프런트엔드 Q&A-php.cn

jQuery를 사용하여 테이블 작업을 수행할 때 특정 조건에 따라 테이블에 있는 일부 셀의 행과 열 위치를 변경해야 할 수도 있습니다. 그러나 테이블의 전체 구조가 파괴되지 않도록 다른 셀의 상대적 위치가 변경되지 않은 상태로 유지되도록 하는 것도 필요합니다. 이 기사에서는 jQuery를 사용하여 위치를 변경할 때 셀의 상대 위치를 변경하지 않고 유지하는 방법을 보여줍니다.

1. 셀 위치 정보 가져오기

jQuery에서는index()메서드를 사용하여 상위 요소에 있는 요소의 위치 인덱스를 가져올 수 있습니다. 예를 들어, 다음 코드를 사용하여 현재 행의 첫 번째 셀 인덱스를 가져올 수 있습니다.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)); });

로그인 후 복사

마찬가지로 parent()메서드를 사용하여 행 및 열 요소를 가져올 수도 있습니다. 셀이 있는 위치를 확인하고 index()메서드를 사용하여 위치 인덱스를 가져옵니다. 예를 들어, 다음 코드는 현재 셀이 위치한 행 요소의 위치 인덱스를 반환합니다.

rrreee

위 방법을 사용하면 테이블에서 셀의 위치 정보를 얻어 후속 작업을 용이하게 할 수 있습니다.

2. 셀 위치 변경

테이블에서 특정 셀의 위치를 변경해야 할 경우 jQuery의 insertBefore()및 insertAfter()메서드를 사용할 수 있습니다. . 이 두 가지 방법은 선택한 요소를 대상 요소 앞이나 뒤로 이동합니다. 예를 들어 다음 코드는 현재 셀을 다음 셀의 앞으로 이동합니다: rrreee마찬가지로 다음 코드는 현재 셀을 이전 셀의 뒤로 이동합니다: rrreee위의 방법이 도움이 될 수 있습니다 us 한 셀의 위치를 변경하면 다른 셀의 위치도 변경되어 테이블 전체의 구조가 망가질 수 있습니다. 다음으로 jQuery를 사용하여 테이블에 있는 다른 셀의 상대적 위치를 변경하지 않고 유지하는 방법을 보여 드리겠습니다. 3. 셀의 상대 위치를 변경하지 않고 유지테이블 내 다른 셀의 상대 위치를 변경하지 않고 유지하려면 다음 방법을 사용할 수 있습니다.

각 셀의 위치 정보 캐시

셀을 이동하기 전에 후속 작업에 사용할 수 있도록 행과 열의 위치 인덱스를 포함하여 테이블에 있는 각 셀의 위치 정보를 캐시해야 합니다. 이를 달성하기 위해 다음 코드와 유사한 방법을 사용할 수 있습니다. rrreee위 코드는 테이블에 있는 각 셀의 행 및 열 위치 인덱스를 가져와 나중에 사용할 수 있도록 배열에 저장합니다.

셀 위치 재정렬

각 셀의 위치 정보를 캐싱한 후 셀 이동 작업을 수행할 수 있습니다. 그러나 insertBefore()또는 insertAfter()메서드를 실행하기 전에 셀 위치 정보에 따라 순서를 다시 정렬해야 합니다. 이는 다음 코드를 사용하여 달성할 수 있습니다. rrreee위 코드는 테이블의 각 셀 위치를 다시 정렬하여 셀이 이동될 때 상대 위치가 변경되지 않도록 합니다. 4. 요약jQuery를 사용하여 테이블을 조작할 때 셀 위치를 변경하는 것은 일반적인 요구 사항입니다. 그러나 테이블의 전체 구조를 유지하려면 다른 셀의 상대적 위치가 변경되지 않도록 해야 합니다. 각 셀의 위치 정보를 캐싱하고 셀의 순서를 재배열함으로써 셀의 위치가 변경될 때 셀의 상대적인 위치를 그대로 유지하는 기능을 쉽게 구현할 수 있습니다.

위 내용은 jquery 셀 상대 위치는 변경되지 않습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!