웹 애플리케이션에서 테이블은 매우 일반적이고 중요한 인터페이스 요소입니다. 테이블의 행과 열은 데이터를 표시하거나 메뉴 옵션을 제공하는 데 사용됩니다. 그러나 사용자가 삭제 작업을 수행하는 경우와 같이 테이블에서 일부 데이터 행을 삭제해야 하는 경우도 있습니다. 이 기사에서는 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()
console.log($('#myTable tbody tr'));
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>
위 내용은 jquery는 테이블에서 4개의 데이터 행을 삭제합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!