> 웹 프론트엔드 > 프런트엔드 Q&A > jquery는 테이블에서 4개의 데이터 행을 삭제합니다.

jquery는 테이블에서 4개의 데이터 행을 삭제합니다.

WBOY
풀어 주다: 2023-05-23 16:02:08
원래의
576명이 탐색했습니다.

웹 애플리케이션에서 테이블은 매우 일반적이고 중요한 인터페이스 요소입니다. 테이블의 행과 열은 데이터를 표시하거나 메뉴 옵션을 제공하는 데 사용됩니다. 그러나 사용자가 삭제 작업을 수행하는 경우와 같이 테이블에서 일부 데이터 행을 삭제해야 하는 경우도 있습니다. 이 기사에서는 jQuery를 사용하여 테이블에서 4개의 데이터 행을 삭제하는 방법을 소개합니다.

1단계: HTML 테이블 만들기

가장 먼저 해야 할 일은 jQuery를 사용하여 테이블의 데이터 행 4개를 삭제할 수 있도록 HTML 테이블을 만드는 것입니다. HTML 코드는 다음과 같습니다.

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>25</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>30</td>
      <td>男</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>28</td>
      <td>女</td>
    </tr>
    <tr>
      <td>赵六</td>
      <td>35</td>
      <td>男</td>
    </tr>
    <tr>
      <td>小红</td>
      <td>23</td>
      <td>女</td>
    </tr>
    <tr>
      <td>小明</td>
      <td>26</td>
      <td>男</td>
    </tr>
  </tbody>
</table>
로그인 후 복사

이 테이블에는 헤더와 6개의 데이터 행이 포함되어 있으며, 각 행에는 이름, 나이, 성별의 3개 데이터 열이 포함되어 있습니다. 우리의 목표는 테이블에서 데이터의 처음 4개 행을 삭제하는 것입니다.

2단계: jQuery를 사용하여 삭제해야 하는 데이터 행 선택

테이블에서 처음 4개 데이터 행을 삭제하려면 jQuery 선택기를 사용하여 이 4개 데이터 행을 선택해야 합니다. 코드는 다음과 같습니다.

var rowsToDelete = $('#myTable tbody tr:lt(4)');
로그인 후 복사

이 코드 줄은 체인 호출 방법을 사용합니다. 먼저 $('#myTable')를 사용하여 테이블을 선택한 다음 :lt( 4) 처음 4개의 데이터 행이 선택되고, 마지막으로 tbody tr를 통해 모든 데이터 행이 선택됩니다. 이러한 방식으로 rowsToDelete 변수에는 삭제해야 하는 모든 행 데이터가 포함됩니다. $('#myTable')选中了表格,然后通过:lt(4)选中了前四行数据,最后通过tbody tr选中了所有的行数据。这样rowsToDelete变量就是所有需要删除的行数据。

步骤三:使用jQuery删除选中的行数据

有了选中的表格行数据,我们就可以使用jQuery删除这些行了。代码如下:

rowsToDelete.remove();
로그인 후 복사

这一行简单的代码使用了jQuery的remove()

3단계: jQuery를 사용하여 선택한 행 데이터 삭제

선택한 테이블 행 데이터로 jQuery를 사용하여 해당 행을 삭제할 수 있습니다. 코드는 다음과 같습니다.

console.log($('#myTable tbody tr'));
로그인 후 복사

이 간단한 코드 줄은 jQuery의 remove() 메서드를 사용하여 선택한 테이블 행 데이터를 삭제합니다.

4단계: 삭제 결과 확인

데이터의 처음 4개 행이 성공적으로 삭제되었는지 확인하려면 다음 코드를 사용하여 테이블 데이터를 콘솔에 출력할 수 있습니다.

<html>
  <head>
    <title>jQuery删除表格四行数据</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function(){
        var rowsToDelete = $('#myTable tbody tr:lt(4)');
        rowsToDelete.remove();
        console.log($('#myTable tbody tr'));
      });
    </script>
  </head>
  <body>
    <table id="myTable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>张三</td>
          <td>25</td>
          <td>男</td>
        </tr>
        <tr>
          <td>李四</td>
          <td>30</td>
          <td>男</td>
        </tr>
        <tr>
          <td>王五</td>
          <td>28</td>
          <td>女</td>
        </tr>
        <tr>
          <td>赵六</td>
          <td>35</td>
          <td>男</td>
        </tr>
        <tr>
          <td>小红</td>
          <td>23</td>
          <td>女</td>
        </tr>
        <tr>
          <td>小明</td>
          <td>26</td>
          <td>男</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
로그인 후 복사
처음 4개 행이 삭제된 경우 데이터가 성공적으로 삭제되면 콘솔에는 데이터의 마지막 두 행만 표시됩니다. 🎜🎜전체 코드는 다음과 같습니다. 🎜rrreee🎜이 문서에 제공된 코드 조각은 테이블 행 데이터 작업을 삭제하는 jQuery를 학습하는 기초로 사용할 수 있습니다. 독자는 실제 요구에 따라 자신의 애플리케이션에 맞게 코드를 수정할 수 있습니다. 시나리오. 🎜

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

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