집 > 기사 > 웹 프론트엔드 > jQuery를 사용하여 동적 테이블 행의 자동 번호 매기기 구현

jQuery를 사용하여 동적 테이블 행의 자동 번호 매기기 구현

PHPz원래의: 2024-02-26 20:03:24703검색

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> 태그를 남겨둡니다. <code><td>标签，用于放置序号。<h2>JavaScript代码</h2> <p>接下来，我们创建一个名为<code>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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

JavaScript jquery css html JS 事件 td

성명：

이전 기사：jQuery에서 $ 기호의 역할을 마스터하세요.다음 기사：jQuery에서 $ 기호의 역할을 마스터하세요.