jQuery를 사용하여 행 수가 증가함에 따라 테이블 일련 번호가 자동으로 변경된다는 점을 이해하세요.

웹 개발에서는 데이터 테이블을 표시해야 하는 경우가 종종 있는데, 일련 번호가 첫 번째에 표시되기를 바랍니다. 사용자가 빠르게 찾을 수 있도록 테이블의 각 행에 열을 추가합니다. 이 기사에서는 jQuery 라이브러리를 사용하여 행 수가 증가함에 따라 테이블 일련 번호가 자동으로 변경되는 효과를 얻습니다.

HTML 구조

먼저 아래와 같이 간단한 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="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td></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>

로그인 후 복사

테이블에서 게재위치 일련번호에 대해 빈 <td> 태그를 남겨둡니다. <td>标签，用于放置序号。

JavaScript代码

接下来，我们创建一个名为script.js的JavaScript文件，用来编写 jQuery 代码来实现表格序号自动变化的功能。

$(document).ready(function() {
    updateTableIndex();

    // 实现序号自动更新的函数
    function updateTableIndex() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 监听表格行增加的事件
    $('#data-table').on('DOMNodeInserted', 'tbody tr', function() {
        updateTableIndex();
    });
});

로그인 후 복사

以上代码中，我们首先在页面加载完成后调用updateTableIndex()函数来为表格添加初始的序号。然后使用on()

JavaScript 코드

다음으로 테이블 일련번호 자동 변경 기능을 구현하는 jQuery 코드를 작성하기 위해 script.js라는 JavaScript 파일을 생성합니다.

body {
    font-family: Arial, sans-serif;
}

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

tr:nth-child(even) {
    background-color: #f9f9f9;
}

로그인 후 복사

위 코드에서는 먼저 updateTableIndex() 함수를 호출하여 페이지가 로드된 후 테이블에 초기 일련번호를 추가합니다. 그런 다음 on() 메서드를 사용하여 테이블의 행 추가 이벤트를 수신합니다. 새 행이 추가되면 일련번호를 업데이트하는 함수가 트리거됩니다.

CSS 스타일

테이블을 더 아름답게 만들기 위해 몇 가지 간단한 CSS 스타일을 추가할 수도 있습니다. 🎜rrreee🎜결론🎜🎜위의 코드 예제를 통해 jQuery를 사용하여 테이블 일련 번호가 다음과 같이 자동으로 변경된다는 것을 인식했습니다. 행 수가 증가합니다. 이러한 기능은 사용자에게 더 나은 데이터 표시 경험을 제공하고 웹 페이지의 상호 작용도 향상시킬 수 있습니다. 이 글이 프론트엔드 개발을 배우고 있는 친구들에게 도움이 되기를 바랍니다. 또한 모두가 함께 소통하고 배워서 발전해 나가기를 바랍니다. 🎜

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