jquery bagaimana untuk menambah baris

JQuery ialah perpustakaan JavaScript sumber terbuka percuma yang memudahkan untuk menyelesaikan tugas biasa seperti manipulasi DOM, pengendali acara, kesan animasi dan Ajax. Dalam pembangunan web, selalunya perlu mengemas kini elemen halaman secara dinamik seperti jadual dan senarai dengan menambah baris. Di bawah ini kami akan menerangkan cara JQuery menambah baris.

1. Tambahkan baris pada jadual

Dalam HTML, kita boleh menggunakan tag <table> untuk mencipta jadual. Untuk menambah baris pada jadual, pertama sekali kita perlu memilih elemen <tbody> dalam jadual melalui JQuery dan kemudian menambah baris baharu padanya menggunakan kaedah append(). Berikut ialah contoh kod:

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
    </tr>
  </thead>
  <tbody class="table-body">
    <tr>
      <td>张三</td>
      <td>20</td>
      <td>男</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>25</td>
      <td>女</td>
    </tr>
  </tbody>
</table>

<script>
  // 获取 tbody 元素
  var tbody = $('table .table-body');
  
  // 创建一个新行
  var newRow = $('<tr><td>王五</td><td>22</td><td>男</td></tr>');
  
  // 将新行添加到 tbody 中
  tbody.append(newRow);
</script>

Dalam kod di atas, kami mula-mula menggunakan kaedah $() untuk mendapatkan elemen <tbody> dalam jadual, dan kemudian gunakan $('<tr>...')</tr> untuk mencipta baris baharu dan tambah Baris baharu ditambahkan pada badan. Ambil perhatian bahawa jika anda ingin menambah berbilang baris, anda boleh menambah berbilang baris pada tatasusunan dan kemudian gunakan append() untuk menambahkan kesemuanya sekali gus.

2. Tambahkan baris pada senarai

Dalam HTML, kita boleh menggunakan tag <ul> atau <ol> untuk membuat senarai tidak tersusun atau tersusun. Untuk menambah baris pada senarai, kita boleh menggunakan kaedah append() untuk menambah elemen <li> baharu pada senarai. Berikut ialah contoh kod:

<ul class="list">
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ul>

<script>
  // 获取列表元素
  var list = $('ul.list');
  
  // 创建一个新的 li 元素
  var newItem = $('<li>梨子</li>');
  
  // 将新元素添加到列表中
  list.append(newItem);
</script>

Dalam kod di atas, kami mula-mula menggunakan kaedah $() untuk mendapatkan elemen senarai, kemudian gunakan $('<li>...') untuk mencipta elemen <li> baharu dan menambah elemen baharu Tambahkan ke senarai.

3. Ringkasan

Melalui pengenalan artikel ini, kami mempelajari cara menggunakan JQuery untuk menambah baris pada jadual atau senarai. Ia boleh dilihat bahawa menggunakan JQuery untuk mengendalikan elemen DOM adalah sangat mudah dan pantas, dan boleh meningkatkan kecekapan pembangunan web dengan ketara. Jika anda belum mencuba JQuery, anda juga boleh pergi ke laman web rasmi untuk memuat turun dan mempelajarinya. Saya percaya ia akan memberi anda banyak kemudahan.

Atas ialah kandungan terperinci jquery bagaimana untuk menambah baris. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!