jquery는 행 자동 추가에 따라 테이블 일련 번호가 변경된다는 것을 어떻게 인식합니까?

jquery가 행 자동 추가로 변경되도록 테이블 일련 번호를 구현하는 방법은 다음과 같습니다. 1. html 파일을 만들고 jQuery 파일을 도입합니다. 2. "table" 태그를 사용하여 ID 값 "myTable"을 사용하여 테이블을 만듭니다. "; 3. jQuery 코드 "DataTables" 플러그인에서 테이블을 관리하는 데 사용됩니다. 4. 그런 다음 행 추가 이벤트와 행 삭제 이벤트를 수신하고 `draw(false)` 메서드를 호출하여 그림을 그린 다음 사용합니다. 일련번호를 업데이트하려면 'updateRowIds'를 사용하세요.

이 튜토리얼의 운영 체제: Windows 10 시스템, jQuery 버전 3.6.0, Dell G3 컴퓨터.

행 자동 추가로 테이블 일련 번호 변경을 구현하는 jquery 방법은 다음과 같습니다.

HTML 코드:

<table id="myTable">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Jane</td>
            <td>30</td>
        </tr>
    </tbody>
</table>

jQuery 코드:

$(document).ready(function() {
    var table = $('#myTable').DataTable();
    // 监听添加行事件
    $('#addRowBtn').on('click', function() {
        table.row.add([
            '', // 空序号，插入后由函数进行自动编号
            '',
            ''
        ]).draw(false);
        updateRowIds();
    });
    // 监听删除行事件
    $('#myTable tbody').on('click', '.deleteRowBtn', function() {
        table
            .row($(this).parents('tr'))
            .remove()
            .draw();
        updateRowIds();
    });
    // 更新序号字段值
    function updateRowIds() {
        $('#myTable tbody tr').each(function(index, row) {
            $(row).find('td:first-child').text(index + 1);
        });
    }
});

먼저 HTML에는 'myTable'이라는 ID가 있는 테이블이 있습니다. 여기에는 ID, 이름, 나이라는 세 개의 열이 포함됩니다.

jQuery 코드에서는 DataTables 플러그인을 사용하여 테이블을 관리합니다. `ready` 함수에서는 DataTables 인스턴스를 초기화하고 이를 `table` 변수에 저장합니다.

그런 다음 행 추가 이벤트와 행 삭제 이벤트를 청취했습니다. 사용자가 추가 버튼을 클릭하면 DataTables 인스턴스에 행을 추가하고 즉시 `draw(false)` 메서드를 호출하여 그립니다(이 메서드를 실행할 때 전달된 false 매개변수는 테이블이 재정렬되지 않음을 의미함). 그런 다음 `updateRowIds`를 사용하여 일련번호만 업데이트하세요.

위 내용은 jquery는 행 자동 추가에 따라 테이블 일련 번호가 변경된다는 것을 어떻게 인식합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!