jquery 테이블에 쿼리 함수 추가 및 삭제-프런트엔드 Q&A-php.cn

인터넷 기술의 지속적인 발전으로 인해 웹 애플리케이션의 중요성이 날로 높아지고 있습니다. 테이블은 중요한 정보 표시 도구이며 다양한 관리 시스템에서 일반적으로 사용됩니다. 우리 프로그램에는 데이터를 표시하기 위한 테이블이 필요하고 테이블을 추가, 삭제, 수정 및 확인할 수 있는 편리한 도구도 필요하므로 작업 효율성을 크게 향상시킬 수 있습니다. 이 기사에서는 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()

이제 행 기능을 성공적으로 추가했습니다.

삭제 기능🎜🎜행 삭제 기능을 구현해 보겠습니다. 아래와 같이 테이블의 HTML 코드에 삭제 버튼을 추가할 수 있습니다. 🎜rrreee🎜 그런 다음, 다음 jQuery 코드를 사용하여 데이터 행 삭제 기능을 구현할 수 있습니다. 🎜rrreee🎜먼저 .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 중국어 웹사이트의 기타 관련 기사를 참조하세요!