테이블 행 번호를 자동으로 업데이트하는 jQuery 구현-JS 튜토리얼-php.cn

表格示例

집

웹 프론트엔드

JS 튜토리얼

테이블 행 번호를 자동으로 업데이트하는 jQuery 구현

Feb 26, 2024 pm 04:06 PM

시트 고쳐 쓰다

테이블 행 번호를 자동으로 업데이트하는 jQuery 구현

jQuery는 웹 개발에 널리 사용되는 인기 있는 JavaScript 라이브러리입니다. 웹 개발에서 데이터를 표시해야 하는 상황에 자주 직면하게 되는데, 테이블은 데이터를 표시하는 일반적인 방법입니다. 동적 테이블에서는 삭제, 추가, 정렬 등의 작업이 자주 발생하는데, 이때 테이블의 행 수가 변경되면 테이블의 일련번호를 자동으로 업데이트해야 합니다. 다음은 이 기능을 구현하기 위해 jQuery를 사용하는 방법을 자세히 소개합니다.

코드 예시는 다음과 같습니다.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>테이블 행 번호를 자동으로 업데이트하는 jQuery 구현</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

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

    th {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
<h1 id="表格示例">表格示例</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Charlie</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

<button id="add-row">新增行</button>
<button id="delete-row">删除行</button>

<script>
    // 初始表格序号
    function updateRowNumber() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 新增行
    $('#add-row').on('click', function() {
        $('#data-table tbody').append('<tr><td></td><td>New</td><td>0</td></tr>');
        updateRowNumber();
    });

    // 删除行
    $('#delete-row').on('click', function() {
        $('#data-table tbody tr:last').remove();
        updateRowNumber();
    });
</script>
</body>
</html>

로그인 후 복사

위 코드에서는 이름과 나이가 포함된 테이블이 먼저 생성되고 일련번호, 이름, 나이가 포함된 헤더가 추가됩니다. 그런 다음 jQuery를 사용하여 각각 행 추가 및 삭제를 위한 두 개의 이벤트 리스너를 작성했습니다. 그 중 updateRowNumber函数实现了当表格行数变化时，自动更新表格中的序号。新增行和删除行的操作都会调用updateRowNumber 기능을 통해 테이블 행 개수가 변경되면 일련번호가 자동으로 업데이트됩니다.

이러한 코드 예제를 통해 테이블 행 수가 변경될 때 일련 번호의 자동 업데이트 기능을 쉽게 구현할 수 있으므로 데이터가 동적으로 변경될 때 테이블이 좋은 표시 효과를 유지할 수 있습니다.

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

본 웹사이트의 성명

본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.