Tambah dan padam fungsi pertanyaan dalam jadual jquery

Dengan perkembangan teknologi Internet yang berterusan, kepentingan aplikasi web semakin meningkat dari hari ke hari. Jadual ialah alat paparan maklumat yang penting dan lazimnya digunakan dalam pelbagai sistem pengurusan. Dalam program kami, kami memerlukan jadual untuk memaparkan data, dan kami juga memerlukan alat yang mudah untuk menambah, memadam, mengubah suai dan menyemak jadual, yang boleh meningkatkan kecekapan kerja kami. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk melaksanakan fungsi penambahan, pemadaman, pengubahsuaian dan pertanyaan jadual.

Pertama, anda memerlukan jadual HTML. Jadual mudah boleh dibuat menggunakan kod HTML berikut.

<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>

Seterusnya, kita perlu menambah kebergantungan jQuery.

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Kemudian, kita boleh mula melaksanakan fungsi tambah, padam, ubah suai dan semak.

Tambah fungsi

Untuk menambah fungsi pada borang, kami memerlukan borang untuk membolehkan pengguna memasukkan data. Borang boleh dibuat menggunakan kod HTML berikut.

<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>

Seterusnya, tambah kod berikut dalam 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();
});

Pertama, kami menggunakan e.preventDefault() untuk melumpuhkan gelagat penyerahan lalai penyemak imbas. Kami kemudiannya mendapat nama dan umur daripada borang dan menjana nombor baharu berdasarkan nombor baris terakhir. Kami kemudiannya menggunakan JQuery untuk menambahkan baris baharu secara dinamik dan menambahkannya pada penghujung jadual. Akhir sekali, kami memanggil kaedah reset() untuk menetapkan semula nilai medan borang kepada kosong.

Kini, kami telah berjaya menambah baris.

Fungsi Padam

Sekarang kita akan melaksanakan fungsi memadam baris. Kita boleh menambah butang padam dalam kod HTML jadual, seperti yang ditunjukkan di bawah:

<td><button class="delete">删除</button></td>

Kemudian, kita boleh menggunakan kod jQuery berikut untuk melaksanakan fungsi memadam baris data.

$("tbody").on("click", ".delete", function() {
  if (confirm("确定删除这行数据吗？")) {
    $(this).closest("tr").remove();
  }
});

Pertama, kami menggunakan .on() pendengar acara untuk mendengar acara klik butang .delete dan menggunakan kaedah closest() untuk mendapatkan elemen moyang terdekatnya, iaitu baris jadual, dan gunakan kaedah remove() Padamkannya. Sebelum itu, kami menggunakan kaedah confirm() untuk mengesahkan kepada pengguna sama ada mereka benar-benar mahu memadamkan baris data ini, untuk mengelakkan pengguna daripada memadamkan data secara tidak sengaja.

Fungsi pengubahsuaian

Kini kami akan melaksanakan fungsi mengubah suai data baris. Begitu juga, kami menambah butang "Edit" pada setiap baris jadual.

<td><button class="edit">编辑</button></td>

Kemudian kita perlu menambah pendengar acara klik untuk butang edit dan mencipta borang di dalamnya untuk mengisi borang dengan data mentah seperti yang ditunjukkan di bawah.

$("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>
  `);
});

Pertama, kami menggunakan kaedah closest() untuk mendapatkan elemen nenek moyang butang edit semasa, iaitu baris jadual, dan menggunakan kaedah find() untuk mendapatkan sel pertama (iaitu ID) bagi baris melalui pemilih, Data dalam sel kedua (iaitu nama) dan sel ketiga (iaitu umur) kemudiannya disimpan ke dalam pembolehubah.

Seterusnya, kami mencipta borang baharu dan mengisi medan dalam borang dengan data daripada pembolehubah. Akhir sekali, kami menggunakan kaedah html() untuk menggantikan kandungan baris jadual dengan kod HTML borang.

Untuk operasi simpan, kita boleh menggunakan kod jQuery berikut untuk mencapainya.

$("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>
  `);
});

Pertama, kami menggunakan kaedah closest() untuk mendapatkan unsur nenek moyang bentuk semasa, iaitu baris jadual dan menggunakan kaedah find() untuk mendapatkan ID baris tersebut. Kami kemudian menggunakan kaedah html() untuk mengemas kini data borang ke dalam baris jadual dan menambahnya semula ke dalam baris menggunakan butang Padam dan Edit. Akhir sekali, kita boleh menggunakan kaedah reset() untuk menetapkan semula medan borang kepada kosong.

Fungsi pertanyaan

Akhir sekali, mari kita laksanakan fungsi pertanyaan mudah. Kita boleh menambah kotak input teks pada halaman dan menapis data jadual dengan bantuan jQuery. Kita boleh menggunakan kod HTML berikut untuk mencipta bar pertanyaan.

<form id="form-search">
  <input type="text" id="search-keyword" placeholder="请输入姓名搜索" required>
  <button type="submit">查询</button>
</form>

Kemudian, kita boleh menggunakan kod jQuery berikut untuk melaksanakan fungsi pertanyaan.

$("#form-search").submit(function(e) {
  e.preventDefault();
  let keyword = $("#search-keyword").val();
  $("tbody tr").hide();
  $("tbody tr:contains('" + keyword + "')").show();
});

Mula-mula, kami menambah pendengar acara serah pada borang menggunakan kaedah .submit() dan menyekat kelakuan lalai menggunakan e.preventDefault(). Kemudian kami mendapatkan kata kunci daripada lajur pertanyaan dan menggunakan kaedah hide() untuk menyembunyikan semua baris jadual. Akhir sekali, kami menggunakan pemilih :contains() untuk menapis baris yang perlu dipaparkan berdasarkan kata kunci dan menggunakan kaedah show() untuk memaparkan baris ini.

Pada ketika ini, kami telah melaksanakan penambahan jadual asas jQuery, pemadaman, pengubahsuaian dan fungsi pertanyaan. Melalui kaedah ini, pengguna boleh dengan mudah menambah, memadam, mengubah suai dan menanyakan data jadual, meningkatkan kecekapan kerja.

Atas ialah kandungan terperinci Tambah dan padam fungsi pertanyaan dalam jadual jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!