jQuery를 사용하여 동적으로 증가하는 테이블 일련 번호 구현-JS 튜토리얼-php.cn

jQuery를 사용하여 동적으로 증가하는 테이블 일련 번호 구현

WBOY

풀어 주다： 2024-02-26 19:51:33

원래의

1292명이 탐색했습니다.

jQuery를 사용하여 동적으로 증가하는 테이블 일련 번호 구현

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

다음으로 줄 수 변화에 따라 일련 번호를 자동으로 늘리는 기능을 구현하는 jQuery 코드를 작성하기 위해 JavaScript 파일 script.js를 생성합니다. 코드는 다음과 같습니다.

rrreee

위 코드에서는 먼저 페이지가 로드된 후 each 메서드를 통해 테이블의 각 행을 순회하고 해당 일련번호 값을 일련번호에 할당합니다. 셀. 그런 다음 on 메소드를 사용하여 테이블의 행 삽입 및 삭제 이벤트를 모니터링합니다. 테이블의 행 수가 변경되면 각 행의 일련 번호 셀 값이 다시 조정됩니다. 행 수가 증가하면 일련 번호가 자동으로 변경될 수 있는지 확인하십시오. 🎜🎜마지막으로 위의 코드를 같은 디렉터리의 script.js 파일에 저장하고 HTML 파일에 jQuery 라이브러리와 JavaScript 파일을 도입하면 테이블 일련번호가 자동으로 증가할 수 있습니다. 행 수가 변경됨에 따라. 🎜🎜위 구현을 통해 행 수가 변경됨에 따라 테이블의 일련 번호가 자동으로 증가하는 기능을 쉽게 구현할 수 있어 웹 페이지에 대한 더 나은 사용자 경험과 데이터 표시 효과를 제공할 수 있습니다. 🎜

위 내용은 jQuery를 사용하여 동적으로 증가하는 테이블 일련 번호 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!