jquery는 테이블에서 4개의 데이터 행을 삭제합니다.
- WBOY원래의
- 2023-05-23 16:02:08527검색
웹 애플리케이션에서 테이블은 매우 일반적이고 중요한 인터페이스 요소입니다. 테이블의 행과 열은 데이터를 표시하거나 메뉴 옵션을 제공하는 데 사용됩니다. 그러나 사용자가 삭제 작업을 수행하는 경우와 같이 테이블에서 일부 데이터 행을 삭제해야 하는 경우도 있습니다. 이 기사에서는 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'));이 간단한 코드 줄은 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!