jquery는 추가, 삭제, 수정 및 쿼리를 수행합니다.-프런트엔드 Q&A-php.cn

웹 애플리케이션이 대중화되면서 클라이언트의 보다 시기적절한 응답에 대한 요구가 점점 더 높아지고 있습니다. 단순한 페이지 상호 작용은 더 이상 대중의 요구를 충족할 수 없습니다. 이때 JavaScript 라이브러리 jQuery가 탄생했습니다. 대부분의 경우 페이지에서 데이터 추가, 삭제, 수정, 쿼리 등의 작업을 수행해야 하는 경우 jQuery가 매우 편리한 선택입니다. 다음으로 jQuery를 사용하여 추가, 삭제, 수정 및 확인 기능을 구현하는 방법에 대해 설명합니다.

1. 페이지 준비

HTML 페이지에서는 아래와 같이 추가, 삭제, 수정, 쿼리에 필요한 요소를 준비해야 합니다.

   jQuery增删改查     
  jQuery增删改查
  名称： 
 年龄： 
  
   ID  名称  年龄  操作

로그인 후 복사

양식 요소와 데이터 테이블은 물론 jQuery 참조 및 쿼리도 포함됩니다. 사용자 정의 JavaScript 파일.

2. 데이터 추가

jQuery를 사용하여 데이터를 추가하는 경우 HTML 페이지에 양식을 정의하고 제출 버튼을 추가해야 합니다. 그리고 JavaScript(일반적으로 jQuery_method.js)로 이벤트 리스너를 작성하여 양식의 데이터를 가져와 테이블에 추가합니다. 코드는 다음과 같습니다.

$(document).ready(function () { // 监听添加操作 $('#add_btn').on('click', function (e) { e.preventDefault(); // 阻止表单默认提交行为 const name = $('#add_name').val(); const age = $('#add_age').val(); addData(name, age); }); }); function addData(name, age) { // 构造表格行 const tr = $(''); tr.append(``) .append(`${name}`) .append(`${age}`); // 构造表格行中的操作列 const td = $(''); const btn_update = $(''); const btn_delete = $(''); btn_update.on('click', function () { updateData(name); }); btn_delete.on('click', function () { deleteData(name); }); td.append(btn_update).append(btn_delete); tr.append(td); // 添加到表格中 $('#table').append(tr); // 分配ID const id = $('#table tr').length; $(`#id_${name}`).html(id); }

로그인 후 복사

위 코드에서는 jQuery를 사용하여 양식의 제출 버튼을 듣고 양식에 입력된 데이터를 얻은 다음 마지막td 요소, 하나는 데이터 수정용이고 다른 하나는 데이터 삭제용입니다. addData()함수는 테이블에 데이터를 추가하고 각 데이터 행에 ID를 할당하는 데 사용됩니다.td元素中添加了两个button元素，一个用于修改数据，一个用于删除数据。函数addData()用于将数据添加到表格中，并给每行数据分配一个ID。


       三、查询数据
       查询数据可以直接操作表格元素来实现。以查询某个姓名为例：
       
        function queryData(name) { const tr = $(`#table tr td:nth-child(2):contains(${name})`).parent(); return tr; }
        
         로그인 후 복사
        
       
       以上代码中，我们使用jQuery的选择器语法，选择所有包含指定姓名的所有行数据，并通过.parent()方法返回其所在的tr3. 데이터 쿼리
       데이터 쿼리는 테이블 요소를 직접 조작하여 수행할 수 있습니다. 이름 쿼리를 예로 들어 보겠습니다.
       
       
        function updateData(name) { const tr = queryData(name); const old_name = tr.find('td').eq(1).text(); const old_age = tr.find('td').eq(2).text(); const $form_update = $(`  名称： 
 年龄： 
   
 `); $('#table').after($form_update); $form_update.on('submit', function (e) { e.preventDefault(); const new_name = $('#update_name').val(); const new_age = $('#update_age').val(); tr.find('td').eq(1).text(new_name); tr.find('td').eq(2).text(new_age); tr.attr('id', `id_${new_name}`); $form_update.remove(); }); $('#close_btn').on('click', function () { $form_update.remove(); }); }
        
         로그인 후 복사
        
       
       위 코드에서는 jQuery의 선택기 구문을 사용하여 지정된 이름이 포함된 데이터의 모든 행을 선택하고
       .parent()메서드를 통해 해당 위치를 반환합니다.
       tr요소입니다.
       4. 데이터 수정
       데이터를 수정하려면 먼저 수정해야 할 데이터를 쿼리한 다음 이를 모달 상자(일반적으로 양식)에 표시하고 사용자가 수정해야 하는 값을 입력할 때까지 기다려야 합니다. 수정하고 수정된 데이터를 제출합니다. 모달 닫기를 위한 이벤트 리스너를 추가한 후 사용자가 입력한 값을 기반으로 테이블의 데이터를 업데이트합니다. 코드는 다음과 같습니다.
       
       
        function deleteData(name) { const tr = queryData(name); const $form_delete = $(`   您确定要删除名称为 ${name} 的数据吗？    
 `); $('#table').after($form_delete); $form_delete.on('submit', function (e) { e.preventDefault(); tr.remove(); $form_delete.remove(); }); $('#close_btn').on('click', function () { $form_delete.remove(); }); }
        
         로그인 후 복사
        
       위 코드에서는 jQuery 선택기 구문을 사용하여 수정해야 할 데이터를 선택하고 ID를 할당했습니다. 그런 다음 모달 상자를 팝업하여 수정해야 할 데이터를 사용자에게 표시하여 사용자가 수정할 수 있도록 합니다. 수정이 완료되면 jQuery를 사용하여 행을 다시 찾고 테이블의 데이터를 업데이트합니다. 버튼을 닫는 작업은 모달 상자를 닫아도 수행됩니다.
       5. 데이터 삭제
       데이터를 삭제하려면 삭제해야 할 데이터를 모달 박스를 통해 사용자에게 표시한 다음 삭제 버튼의 클릭 이벤트를 듣고 테이블에서 행을 삭제해야 합니다. . 코드는 다음과 같습니다.
       rrreee위 코드에서는 jQuery의 선택기 구문을 사용하여 삭제해야 할 데이터를 선택하고, 삭제해야 할 데이터를 모달 박스를 팝업하여 사용자에게 표시합니다. 사용자가 확인을 클릭하면 데이터 행이 테이블에서 삭제됩니다. 취소 버튼 작동을 위해 모달 상자는 여전히 닫혀 있습니다. 6. 요약위의 코드를 통해 jQuery를 사용하여 추가, 삭제, 수정 및 확인이 매우 쉽다는 것을 알 수 있습니다. 페이지 준비가 완료되면 jQuery의 셀렉터 구문을 이용하여 동작이 필요한 DOM 요소를 선택하고, jQuery의 이벤트 리스너를 이용하여 해당 이벤트를 처리합니다. 동시에 jQuery의 간결한 코드는 큰 편리함도 제공합니다. 복잡한 로직이 필요하지 않은 추가, 삭제, 수정, 검색 기능에 jQuery를 사용하는 것은 매우 좋은 선택입니다.
       위 내용은 jquery는 추가, 삭제, 수정 및 쿼리를 수행합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!