jquery 개인정보 추가, 삭제, 수정 확인-프런트엔드 Q&A-php.cn

jQuery는 HTML 문서의 상호 작용, 이벤트 처리 및 애니메이션 효과를 처리하는 데 자주 사용되는 편리하고 빠른 Javascript 라이브러리입니다. 본 글에서는 jQuery를 이용하여 개인정보의 추가, 삭제, 수정, 확인 기능을 구현하는 방법을 소개합니다.

1. 준비

먼저 개인 정보가 포함된 HTML 테이블이 필요합니다. 이 테이블은 수동으로 작성하거나 템플릿 엔진을 사용하여 생성할 수 있습니다. 테이블에 다음 헤더와 데이터가 포함되어 있다고 가정해 보겠습니다.

<table id="info-table">
    <thead>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>联系方式</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>男</td>
            <td>25</td>
            <td>138****1234</td>
            <td>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            </td>
        </tr>
        <tr>
            <td>2</td>
            <td>李四</td>
            <td>女</td>
            <td>30</td>
            <td>139****5678</td>
            <td>
                <button class="edit-btn">编辑</button>
                <button class="delete-btn">删除</button>
            </td>
        </tr>
        ...
    </tbody>
</table>

로그인 후 복사

둘째, 정보를 추가하고 편집하려면 양식이 필요합니다. HTML을 사용하여 양식을 구성할 수 있습니다. 예:

<form id="info-form">
    <input type="hidden" id="info-id" value="">
    <div>
        <label for="info-name">姓名：</label>
        <input type="text" id="info-name" name="name" required="required">
    </div>
    <div>
        <label for="info-gender">性别：</label>
        <input type="radio" id="info-gender-male" name="gender" value="male" required="required">
        <label for="info-gender-male">男</label>
        <input type="radio" id="info-gender-female" name="gender" value="female" required="required">
        <label for="info-gender-female">女</label>
    </div>
    <div>
        <label for="info-age">年龄：</label>
        <input type="number" id="info-age" name="age" required="required">
    </div>
    <div>
        <label for="info-phone">联系方式：</label>
        <input type="tel" id="info-phone" name="phone" required="required">
    </div>
    <div>
        <button type="submit" id="submit-btn">提交</button>
        <button type="button" id="cancel-btn">取消</button>
    </div>
</form>

로그인 후 복사

그 중 "info-id"라는 ID를 가진 숨겨진 필드는 편집 중인 정보의 ID를 기록하는 데 사용됩니다. 값이 비어 있다는 의미입니다. 현재 작업은 추가라는 뜻이고, 비어 있지 않으면 현재 작업이 편집이라는 의미입니다.

2. 정보 추가

정보 추가 작업은 비교적 간단합니다. 양식의 제출 이벤트를 듣고 양식 데이터를 가져와 테이블에 삽입하기만 하면 됩니다. 구체적인 단계는 다음과 같습니다.

제출 이벤트 듣기:

$('#info-form').on('submit', function(e) {
    e.preventDefault();
    // ...
});

로그인 후 복사

양식 데이터 가져오기:

var formData = {
    name: $('#info-name').val(),
    gender: $('input[name="gender"]:checked').val(),
    age: $('#info-age').val(),
    phone: $('#info-phone').val()
};

로그인 후 복사

테이블에 삽입:

var newRow = $('<tr>')
    .append($('<td>').text(newId))
    .append($('<td>').text(formData.name))
    .append($('<td>').text(formData.gender === 'male' ? '男' : '女'))
    .append($('<td>').text(formData.age))
    .append($('<td>').text(formData.phone))
    .append($('<td>')
        .append($('<button>').addClass('edit-btn').text('编辑'))
        .append($('<button>').addClass('delete-btn').text('删除'))
    );
$('#info-table tbody').append(newRow);

로그인 후 복사

그중 newId는 새로 생성된 이벤트의 ID입니다. 현재 테이블의 최대 ID를 기반으로 해야 하는 추가 정보를 생성하려면 1을 추가하세요.

3. 정보 편집

정보 편집 작업은 추가 작업보다 약간 더 복잡합니다. 먼저 양식에서 편집해야 하는 정보를 찾은 다음 해당 데이터를 양식에 입력하고 들어야 합니다. 양식의 제출 이벤트에 추가하고 업데이트가 완료된 후 테이블의 원본 데이터를 업데이트합니다. 구체적인 단계는 다음과 같습니다.

편집 버튼의 클릭 이벤트 듣기:

$('#info-table').on('click', '.edit-btn', function() {
    var row = $(this).closest('tr');
    var id = row.find('td:first-child').text();
    var name = row.find('td:nth-child(2)').text();
    var gender = row.find('td:nth-child(3)').text() === '男' ? 'male' : 'female';
    var age = row.find('td:nth-child(4)').text();
    var phone = row.find('td:nth-child(5)').text();
    $('#info-id').val(id);
    $('#info-name').val(name);
    $('input[name="gender"][value="' + gender + '"]').prop('checked', true);
    $('#info-age').val(age);
    $('#info-phone').val(phone);
    $('#submit-btn').text('更新');
});

로그인 후 복사

양식의 제출 이벤트 듣기:

$('#info-form').on('submit', function(e) {
    e.preventDefault();
    var id = $('#info-id').val();
    var formData = {
        name: $('#info-name').val(),
        gender: $('input[name="gender"]:checked').val(),
        age: $('#info-age').val(),
        phone: $('#info-phone').val()
    };
    var row = $('#info-table').find('td:first-child').filter(function() {
        return $(this).text() === id;
    }).closest('tr');
    row.find('td:nth-child(2)').text(formData.name);
    row.find('td:nth-child(3)').text(formData.gender === 'male' ? '男' : '女');
    row.find('td:nth-child(4)').text(formData.age);
    row.find('td:nth-child(5)').text(formData.phone);
    $('#info-id').val('');
    $('#info-name').val('');
    $('input[name="gender"]').prop('checked', false);
    $('#info-age').val('');
    $('#info-phone').val('');
    $('#submit-btn').text('添加');
});

로그인 후 복사

그 중에서 찾기, 필터링 및 가장 가까운 방법을 사용하여 편집해야 하는 행을 찾고 다시 찾기를 사용합니다. 메소드는 행의 각 열에 대한 데이터를 가져옵니다.

4. 정보 삭제

정보 삭제는 삭제 버튼을 클릭할 때 삭제 여부를 확인하고, 해당 행을 테이블에서 제거하기만 하면 됩니다. 구체적인 단계는 다음과 같습니다.

삭제 버튼의 클릭 이벤트를 듣습니다.

$('#info-table').on('click', '.delete-btn', function() {
    var row = $(this).closest('tr');
    if (confirm('确定要删除该信息吗？')) {
        row.remove();
    }
});

로그인 후 복사

그 중에서 가장 가까운 방법을 사용하여 현재 행을 가져오고, 제거 방법을 사용하여 DOM 트리에서 제거합니다.

현재까지 개인정보 추가, 삭제, 수정, 확인 기능을 완료하였습니다. 전체 코드 예제는 다음과 같습니다:

$(function() {
    $('#info-table').on('click', '.edit-btn', function() {
        var row = $(this).closest('tr');
        var id = row.find('td:first-child').text();
        var name = row.find('td:nth-child(2)').text();
        var gender = row.find('td:nth-child(3)').text() === '男' ? 'male' : 'female';
        var age = row.find('td:nth-child(4)').text();
        var phone = row.find('td:nth-child(5)').text();
        $('#info-id').val(id);
        $('#info-name').val(name);
        $('input[name="gender"][value="' + gender + '"]').prop('checked', true);
        $('#info-age').val(age);
        $('#info-phone').val(phone);
        $('#submit-btn').text('更新');
    });
    
    $('#info-form').on('submit', function(e) {
        e.preventDefault();
        var id = $('#info-id').val();
        var formData = {
            name: $('#info-name').val(),
            gender: $('input[name="gender"]:checked').val(),
            age: $('#info-age').val(),
            phone: $('#info-phone').val()
        };
        if (id === '') {
            var newId = parseInt($('#info-table').find('td:first-child')
                .map(function() { return $(this).text(); }).get()
                .reduce(function(prev, curr) { return parseInt(prev) > parseInt(curr) ? prev : curr; })) + 1;
            var newRow = $('<tr>')
                .append($('<td>').text(newId))
                .append($('<td>').text(formData.name))
                .append($('<td>').text(formData.gender === 'male' ? '男' : '女'))
                .append($('<td>').text(formData.age))
                .append($('<td>').text(formData.phone))
                .append($('<td>')
                    .append($('<button>').addClass('edit-btn').text('编辑'))
                    .append($('<button>').addClass('delete-btn').text('删除'))
                );
            $('#info-table tbody').append(newRow);
        } else {
            var row = $('#info-table').find('td:first-child').filter(function() {
                return $(this).text() === id;
            }).closest('tr');
            row.find('td:nth-child(2)').text(formData.name);
            row.find('td:nth-child(3)').text(formData.gender === 'male' ? '男' : '女');
            row.find('td:nth-child(4)').text(formData.age);
            row.find('td:nth-child(5)').text(formData.phone);
            $('#info-id').val('');
            $('#info-name').val('');
            $('input[name="gender"]').prop('checked', false);
            $('#info-age').val('');
            $('#info-phone').val('');
            $('#submit-btn').text('添加');
        }
    });
    
    $('#info-table').on('click', '.delete-btn', function() {
        var row = $(this).closest('tr');
        if (confirm('确定要删除该信息吗？')) {
            row.remove();
        }
    });
    
    $('#cancel-btn').on('click', function() {
        $('#info-id').val('');
        $('#info-name').val('');
        $('input[name="gender"]').prop('checked', false);
        $('#info-age').val('');
        $('#info-phone').val('');
        $('#submit-btn').text('添加');
    });
});

로그인 후 복사

위 내용은 jquery 개인정보 추가, 삭제, 수정 확인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!