jQuery를 사용하여 동적으로 증가하는 테이블 일련 번호 구현
- WBOY원래의
- 2024-02-26 19:51:331197검색
jQuery를 사용하여 행 수가 변경됨에 따라 테이블 일련 번호를 자동으로 늘립니다.
웹 개발을 하다 보면 테이블에 일련 번호를 추가해야 하는 상황이 자주 발생합니다. 테이블의 행 수가 자주 변경되는 경우 테이블의 일련 번호를 동적으로 조정해야 하며 jQuery는 이 기능을 쉽게 구현할 수 있습니다. 이 기사에서는 jQuery를 사용하여 행 수가 변경됨에 따라 테이블의 일련 번호가 자동으로 증가하는 효과를 얻는 방법을 소개하고 구체적인 코드 예제를 첨부합니다.
먼저 HTML 파일에 테이블을 생성하고 일련번호를 표시하려면 테이블의 각 행에 일련번호가 포함된 셀을 추가해야 합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格序号随行数变化自动增加</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<table id="myTable">
<thead>
<tr>
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr>
<td class="index"></td>
<td>张三</td>
<td>20</td>
</tr>
<tr>
<td class="index"></td>
<td>李四</td>
<td>25</td>
</tr>
<tr>
<td class="index"></td>
<td>王五</td>
<td>30</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>위 코드에서는 일련 번호, 이름, 나이의 세 가지 열을 포함하는 간단한 테이블을 정의하고 일련 번호 셀에 클래스 이름 index를 추가했습니다. jQuery에서 선택합니다. index，用于在jQuery中进行选择。
接下来，我们创建一个JavaScript文件script.js，来编写jQuery代码实现序号随行数变化自动增加的功能。代码如下所示：
$(document).ready(function() {
$("#myTable tbody tr").each(function(index) {
$(this).find(".index").text(index + 1);
});
$("#myTable").on("DOMNodeInserted", function() {
$("#myTable tbody tr").each(function(index) {
$(this).find(".index").text(index + 1);
});
});
$("#myTable").on("DOMNodeRemoved", function() {
$("#myTable tbody tr").each(function(index) {
$(this).find(".index").text(index + 1);
});
});
});在上面的代码中，我们首先在页面加载完成后，通过each方法遍历表格中的每一行，并为序号单元格赋予对应的序号值。然后，通过on方法监听表格中行的插入和删除事件，若表格中的行数发生变化，会重新调整每行中序号单元格的值，确保序号能够随行数变化而自动增加。
最后，将以上代码保存到同一目录下的script.js
script.js를 생성합니다. 코드는 다음과 같습니다. rrreee
위 코드에서는 먼저 페이지가 로드된 후each 메서드를 통해 테이블의 각 행을 순회하고 해당 일련번호 값을 일련번호에 할당합니다. 셀. 그런 다음 on 메소드를 사용하여 테이블의 행 삽입 및 삭제 이벤트를 모니터링합니다. 테이블의 행 수가 변경되면 각 행의 일련 번호 셀 값이 다시 조정됩니다. 행 수가 증가하면 일련 번호가 자동으로 변경될 수 있는지 확인하십시오. 🎜🎜마지막으로 위의 코드를 같은 디렉터리의 script.js 파일에 저장하고 HTML 파일에 jQuery 라이브러리와 JavaScript 파일을 도입하면 테이블 일련번호가 자동으로 증가할 수 있습니다. 행 수가 변경됨에 따라. 🎜🎜위 구현을 통해 행 수가 변경됨에 따라 테이블의 일련 번호가 자동으로 증가하는 기능을 쉽게 구현할 수 있어 웹 페이지에 대한 더 나은 사용자 경험과 데이터 표시 효과를 제공할 수 있습니다. 🎜위 내용은 jQuery를 사용하여 동적으로 증가하는 테이블 일련 번호 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!