인터넷 기술의 지속적인 발전으로 인해 웹 애플리케이션의 중요성이 날로 높아지고 있습니다. 테이블은 중요한 정보 표시 도구이며 다양한 관리 시스템에서 일반적으로 사용됩니다. 우리 프로그램에는 데이터를 표시하기 위한 테이블이 필요하고 테이블을 추가, 삭제, 수정 및 확인할 수 있는 편리한 도구도 필요하므로 작업 효율성을 크게 향상시킬 수 있습니다. 이 기사에서는 jQuery를 사용하여 테이블의 추가, 삭제, 수정 및 쿼리 기능을 구현하는 방법을 소개합니다.
먼저 HTML 테이블이 필요합니다. 다음 HTML 코드를 사용하여 간단한 테이블을 만들 수 있습니다.
<table id="table-data"> <thead> <tr> <th>编号</th> <th>姓名</th> <th>年龄</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>25</td> <td><button class="delete">删除</button></td> </tr> <tr> <td>2</td> <td>李四</td> <td>30</td> <td><button class="delete">删除</button></td> </tr> <tr> <td>3</td> <td>王五</td> <td>28</td> <td><button class="delete">删除</button></td> </tr> </tbody> </table>
다음으로 jQuery 종속성을 추가해야 합니다.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
이제 추가, 삭제, 수정, 확인 기능 구현을 시작할 수 있습니다.
양식에 기능을 추가하려면 사용자가 데이터를 입력할 수 있는 양식이 필요합니다. 양식은 다음 HTML 코드를 사용하여 만들 수 있습니다.
<form id="form-data"> <div> <label for="name">姓名:</label> <input type="text" id="name" required> </div> <div> <label for="age">年龄:</label> <input type="number" id="age" required> </div> <button type="submit">添加</button> </form>
다음으로 jQuery에 다음 코드를 추가합니다.
$("#form-data").submit(function(e) { e.preventDefault(); let name = $("#name").val(); let age = $("#age").val(); let newId = $("#table-data tbody tr:last-child td:first-child").text() + 1; let row = `<tr> <td>${newId}</td> <td>${name}</td> <td>${age}</td> <td><button class="delete">删除</button></td> </tr>`; $("#table-data tbody").append(row); $("#form-data")[0].reset(); });
먼저 e.preventDefault()
를 사용하여 브라우저의 기본 제출 동작을 금지합니다. 그런 다음 양식에서 이름과 나이를 가져오고 마지막 행의 번호를 기반으로 새 번호를 생성합니다. 그런 다음 JQuery를 사용하여 새 행을 동적으로 추가하고 이를 테이블 끝에 추가합니다. 마지막으로 reset()
메서드를 호출하여 양식 필드의 값을 빈 값으로 재설정합니다. e.preventDefault()
禁止浏览器的默认提交行为。然后,我们从表单中获取姓名和年龄,并根据最后一行的编号生成新的编号。然后,我们使用JQuery动态添加一个新的行,并将其附加到表格的末尾。最后,我们调用reset()
方法将表单字段的值重置为空。
现在,我们就成功了添加行的功能。
下面我们来实现删除行的功能。我们可以在表格的HTML代码中添加一个删除按钮,如下所示:
<td><button class="delete">删除</button></td>
然后,我们可以使用以下jQuery代码来实现删除数据行的功能。
$("tbody").on("click", ".delete", function() { if (confirm("确定删除这行数据吗?")) { $(this).closest("tr").remove(); } });
首先,我们使用.on()
事件监听器来监听.delete
按钮的点击事件,并使用closest()
方法获取其最近的祖先元素,即表格行,并使用remove()
方法将其删除。在此之前,我们使用confirm()
方法向用户确认是否确实要删除这一行数据,从而避免用户误删数据。
下面我们来实现修改行数据的功能。同样地,我们添加一个“编辑”按钮到表格的每行中。
<td><button class="edit">编辑</button></td>
然后,我们需要为编辑按钮添加点击事件监听器,并在其中创建一个表单,将原始数据填入表单中,如下所示。
$("tbody").on("click", ".edit", function() { let id = $(this).closest("tr").find("td:first-child").text(); let name = $(this).closest("tr").find("td:nth-child(2)").text(); let age = $(this).closest("tr").find("td:nth-child(3)").text(); let form = ` <form id="form-edit"> <div> <label for="edit-name">姓名:</label> <input type="text" id="edit-name" value="${name}" required> </div> <div> <label for="edit-age">年龄:</label> <input type="number" id="edit-age" value="${age}" required> </div> <button type="submit">保存</button> </form>`; $(this).closest("tr").html(` <td>${id}</td> <td>${form}</td> <td></td> <td></td> `); });
首先,我们使用closest()
方法获取当前编辑按钮的祖先元素,即表格行,并使用find()
方法通过选择器获取该行的第一个单元格(即ID)、第二个单元格(即姓名)和第三个单元格(即年龄)中的数据,然后将其存储到变量中。
接着,我们创建一个新的表单,并使用变量中的数据填充该表单中的字段。最后,我们使用html()
方法将表格行的内容替换为表单的HTML代码。
对于保存操作,我们可以使用以下jQuery代码来实现。
$("tbody").on("submit", "#form-edit", function(e) { e.preventDefault(); let name = $("#edit-name").val(); let age = $("#edit-age").val(); let id = $(this).closest("tr").find("td:first-child").text(); $(this).closest("tr").html(` <td>${id}</td> <td>${name}</td> <td>${age}</td> <td> <button class="delete">删除</button> <button class="edit">编辑</button> </td> `); });
首先,我们使用closest()
方法获取当前表单的祖先元素,即表格行,并使用find()
方法获取该行的ID。然后,我们使用html()
方法将表单的数据更新到表格行中,并使用“删除”和“编辑”按钮重新添加到该行中。最后,我们可以使用reset()
方法将表单的字段重置为空。
最后,我们来实现一个简单的查询功能。我们可以在页面上添加一个文本输入框,并借助jQuery过滤表格数据。我们可以使用以下HTML代码来创建查询栏。
<form id="form-search"> <input type="text" id="search-keyword" placeholder="请输入姓名搜索" required> <button type="submit">查询</button> </form>
然后,我们可以使用以下jQuery代码来实现查询功能。
$("#form-search").submit(function(e) { e.preventDefault(); let keyword = $("#search-keyword").val(); $("tbody tr").hide(); $("tbody tr:contains('" + keyword + "')").show(); });
首先,我们使用.submit()
方法为表单添加提交事件监听器,并使用e.preventDefault()
禁止默认行为。然后,我们从查询栏中获取关键字,并使用hide()
方法将表格的所有行都隐藏起来。最后,我们使用:contains()
选择器,根据关键字过滤需要显示的行,并使用show()
.on()
이벤트 리스너를 사용하여 .delete
버튼의 클릭 이벤트를 수신하고 closest() 메소드 가장 가까운 상위 요소인 테이블 행을 가져오고 <code>remove()
메소드를 사용하여 제거합니다. 그 전에 confirm()
메서드를 사용하여 사용자가 실수로 데이터를 삭제하는 것을 방지하기 위해 이 데이터 행을 정말로 삭제할지 여부를 사용자에게 확인합니다. 🎜🎜수정 기능🎜🎜이제 행 데이터를 수정하는 기능을 구현해 보겠습니다. 마찬가지로 테이블의 각 행에 "편집" 버튼을 추가합니다. 🎜rrreee🎜그런 다음 편집 버튼에 대한 클릭 이벤트 리스너를 추가하고 그 안에 양식을 생성하여 아래와 같이 원시 데이터로 양식을 채워야 합니다. 🎜rrreee🎜먼저 closest()
메서드를 사용하여 현재 편집 버튼의 상위 요소인 테이블 행을 가져오고 find()
메서드를 사용합니다. 선택기를 통해 행의 값을 가져오려면 첫 번째 셀(예: ID), 두 번째 셀(예: 이름) 및 세 번째 셀(예: 연령)의 데이터가 변수에 저장됩니다. 🎜🎜다음으로 새 양식을 만들고 양식의 필드를 변수의 데이터로 채웁니다. 마지막으로 html()
메서드를 사용하여 테이블 행의 내용을 양식의 HTML 코드로 바꿉니다. 🎜🎜저장 작업의 경우 다음 jQuery 코드를 사용하여 이를 수행할 수 있습니다. 🎜rrreee🎜먼저 closest()
메서드를 사용하여 현재 양식의 상위 요소인 테이블 행을 가져오고 find()
메서드를 사용하여 행의 ID를 가져옵니다. 그런 다음 html()
메서드를 사용하여 양식의 데이터를 테이블 행으로 업데이트하고 "삭제" 및 "편집" 버튼을 사용하여 행에 다시 추가합니다. 마지막으로 reset()
메서드를 사용하여 양식의 필드를 비워두도록 재설정할 수 있습니다. 🎜🎜쿼리 기능🎜🎜마지막으로 간단한 쿼리 기능을 구현해 보겠습니다. 페이지에 텍스트 입력 상자를 추가하고 jQuery를 사용하여 테이블 데이터를 필터링할 수 있습니다. 다음 HTML 코드를 사용하여 쿼리 표시줄을 만들 수 있습니다. 🎜rrreee🎜그런 다음 다음 jQuery 코드를 사용하여 쿼리 기능을 구현할 수 있습니다. 🎜rrreee🎜먼저 .submit()
메서드를 사용하여 양식에 제출 이벤트 리스너를 추가하고 e.preventDefault()
를 사용하여 기본 동작을 억제합니다. 그런 다음 쿼리 열에서 키워드를 가져오고 hide()
메서드를 사용하여 테이블의 모든 행을 숨깁니다. 마지막으로 :contains()
선택기를 사용하여 키워드를 기준으로 표시해야 하는 행을 필터링하고 show()
메서드를 사용하여 이러한 행을 표시합니다. 🎜🎜이제 기본적인 jQuery 테이블 추가, 삭제, 수정, 쿼리 기능을 구현했습니다. 이 방법을 통해 사용자는 테이블 데이터를 쉽게 추가, 삭제, 수정, 조회할 수 있어 업무 효율성이 크게 향상됩니다. 🎜위 내용은 jquery 테이블에 쿼리 함수 추가 및 삭제의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!