Ketahui cara menambah baris pada jadual menggunakan jQuery dengan cepat

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas untuk memudahkan pembangunan web. Menggunakan jQuery dalam halaman web boleh menjadikan kod lebih ringkas, lebih mudah diselenggara dan boleh mencapai banyak fungsi yang kompleks. Artikel ini akan mengajar anda cara menggunakan jQuery untuk menambah baris dengan cepat pada jadual, membolehkan anda mengendalikan penambahan data jadual dengan mudah.

Pertama sekali, kami menganggap bahawa anda sudah memahami sintaks asas jQuery dan cara memperkenalkan perpustakaan jQuery ke dalam halaman web. Jika anda belum biasa dengan jQuery lagi, pelajari beberapa asas sebelum mencuba contoh ini.

Seterusnya, kami menggunakan kes khusus untuk menunjukkan cara menggunakan jQuery untuk menambah baris pada jadual. Katakan kita mempunyai jadual ringkas yang mengandungi dua lajur data: nama dan umur, seperti yang ditunjukkan di bawah:

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
  </tr>
</table>

Sekarang kita mahu melaksanakan fungsi yang menambah baris data ke hujung jadual selepas mengklik butang. Mula-mula, tambah butang pada halaman Apabila butang diklik, operasi menambah baris dicetuskan seperti berikut:

<button id="addRowBtn">添加行</button>

Seterusnya, kami menggunakan jQuery untuk melaksanakan fungsi menambah baris. Mula-mula memperkenalkan perpustakaan jQuery ke dalam halaman:

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Kemudian, tambah kod jQuery di bahagian bawah halaman untuk melaksanakan fungsi menambah baris:

$(document).ready(function() {
  // 点击按钮触发添加行操作
  $('#addRowBtn').click(function() {
    // 在表格末尾添加一行
    $('#myTable').append('<tr><td>王五</td><td>35</td></tr>');
  });
});

Dalam kod di atas, kami menggunakan elemen $('#addRowBtn')来选中按钮元素，然后使用.click()方法来为按钮添加点击事件。点击按钮时，执行回调函数，在函数中使用$('#myTable')选中表格，然后使用.append()方法在表格末尾添加一行新的<tr> dan mengisi data. <p>Kini anda boleh membuka halaman dalam penyemak imbas, klik butang, dan anda akan melihat baris data baharu ditambahkan pada jadual. Dengan cara ini, menggunakan jQuery untuk menambah baris pada jadual dicapai. </p> <p>Secara umum, menambah baris pada jadual menggunakan jQuery hanya memerlukan beberapa baris kod ringkas. Pemilih dan kaedah operasi jQuery menjadikan pemprosesan elemen DOM sangat mudah dan cekap, membolehkan kami mengendalikan pelbagai elemen dalam halaman web dengan mudah. Saya harap contoh ini membantu anda, dan saya harap anda boleh terus mempelajari jQuery dan teknologi front-end lain dan terus meningkatkan kemahiran anda. </p> </tr>

Atas ialah kandungan terperinci Ketahui cara menambah baris pada jadual menggunakan jQuery dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!