> 웹 프론트엔드 > 프런트엔드 Q&A > jquery 테이블은 데이터 행을 동적으로 삭제합니다.

jquery 테이블은 데이터 행을 동적으로 삭제합니다.

王林
풀어 주다: 2023-05-23 11:53:37
원래의
766명이 탐색했습니다.

웹 애플리케이션을 개발할 때 데이터 테이블은 일반적으로 데이터를 표시하는 데 사용되는 공통 구성 요소입니다. 그러나 때로는 테이블에서 특정 데이터 행을 삭제해야 하는 경우가 있는데, 이 기능을 수행하려면 jQuery를 사용하는 것이 매우 편리합니다.

jQuery에서는 일반적으로 remove() 메서드를 사용하여 DOM 요소를 제거합니다. 따라서 테이블에서 데이터 행을 삭제할 때 먼저 이 행의 DOM 요소를 얻은 다음 remove() 메서드를 사용하여 테이블에서 이를 제거해야 합니다. remove() 方法来删除 DOM 元素。因此,在删除表格中的一行数据时,我们需要先获取这一行的 DOM 元素,然后使用 remove() 方法将其从表格中移除。

首先,让我们看一下如何获取表格中的一行数据。假设我们有一个表格,其中每一行都有一个删除按钮,当用户点击删除按钮时,我们需要将该行从表格中删除。以下是一个示例表格的 HTML 代码:

<table id="data-table">
  <thead>
    <tr>
      <th>Name</th>
      <th>Email</th>
      <th>Actions</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>John Doe</td>
      <td>john.doe@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <tr>
      <td>Jane Smith</td>
      <td>jane.smith@example.com</td>
      <td><button class="delete-row">Delete</button></td>
    </tr>
    <!-- more rows -->
  </tbody>
</table>
로그인 후 복사

在这个表格中,每一行都包含三个单元格,其中最后一个单元格包含一个名为 "Delete" 的按钮。现在,我们可以使用 jQuery 来为每个删除按钮添加一个点击事件处理程序,以删除其对应的行。以下是实现代码:

$(document).ready(function() {
  // 添加点击事件处理程序
  $('.delete-row').click(function() {
    // 获取要删除的行
    var row = $(this).closest('tr');
    // 从表格中移除行
    row.remove();
  });
});
로그인 후 복사

在上面的代码中,我们首先使用 $() 函数在文档载入完毕后查找所有名为 "delete-row" 的按钮,并为每个按钮添加了一个点击事件处理程序。当用户点击删除按钮时,点击事件将触发,并将执行回调函数。

在回调函数中,我们使用 closest() 方法查找当前按钮所在的行,并将该行存储在 row 变量中。然后,我们使用 remove() 方法将该行从表格中移除。

需要注意的是,尽管我们使用了 closest()

먼저 테이블에서 데이터 행을 가져오는 방법을 살펴보겠습니다. 각 행에 삭제 버튼이 있는 테이블이 있고 사용자가 삭제 버튼을 클릭하면 테이블에서 해당 행을 삭제해야 한다고 가정합니다. 다음은 예제 테이블의 HTML 코드입니다.

rrreee

이 테이블에서 각 행에는 세 개의 셀이 포함되어 있으며, 마지막 셀에는 "삭제"라는 버튼이 포함되어 있습니다. 이제 jQuery를 사용하여 각 삭제 버튼에 클릭 이벤트 핸들러를 추가하여 해당 행을 삭제할 수 있습니다. 구현 코드는 다음과 같습니다. 🎜rrreee🎜위 코드에서는 먼저 $() 함수를 사용하여 문서가 로드된 후 "delete-row"라는 이름의 모든 버튼을 찾고 각 A에 대해 클릭 이벤트 핸들러가 버튼에 추가되었습니다. 사용자가 삭제 버튼을 클릭하면 클릭 이벤트가 발생하고 콜백 함수가 실행됩니다. 🎜🎜콜백 함수에서는 closest() 메서드를 사용하여 현재 버튼이 있는 행을 찾아 row 변수에 저장합니다. 그런 다음 remove() 메서드를 사용하여 테이블에서 행을 제거합니다. 🎜🎜 closest() 메서드를 사용하더라도 가장 가깝게 일치하는 요소만 찾으므로 삭제 버튼이 행에 직접 포함되지 않고 셀에 포함된다는 점에 유의하는 것이 중요합니다. 또는 다른 요소의 경우 올바른 요소와 일치하도록 선택기를 수정해야 합니다. 🎜🎜jQuery를 사용하여 테이블의 데이터 행을 동적으로 삭제하는 방법입니다. 웹 애플리케이션을 개발하는 경우 이 접근 방식을 사용하면 사용자가 데이터를 더 쉽게 편집하고 관리할 수 있습니다. 🎜

위 내용은 jquery 테이블은 데이터 행을 동적으로 삭제합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿