jquery menambah baris ke jadual

jQuery ialah perpustakaan JavaScript yang cekap dan ringkas yang boleh memudahkan pengaturcaraan JavaScript. Untuk pembangun web, kita sering perlu memanjangkan jadual HTML (Jadual) dengan menambah baris baharu Jadi bagaimana untuk menambah baris pada jadual melalui jQuery? Seterusnya, mari belajar cara menggunakan jQuery untuk menambah baris pada jadual.

1. Tentukan jadual dalam HTML

Pertama, tentukan jadual yang kita perlukan pada halaman HTML. Seperti yang ditunjukkan di bawah:

<table id="myTable">
  <thead>
    <tr>
      <th>姓名</th>
      <th>年龄</th>
      <th>职业</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>张三</td>
      <td>28</td>
      <td>工程师</td>
    </tr>
    <tr>
      <td>李四</td>
      <td>32</td>
      <td>设计师</td>
    </tr>
    <tr>
      <td>王五</td>
      <td>23</td>
      <td>市场营销</td>
    </tr>
  </tbody>
</table>

2. Tambah baris baharu

Seterusnya, tambah baris baharu dalam jQuery. Kita boleh menambah baris baharu dengan mencipta elemen tr yang mengandungi elemen td. Seperti yang ditunjukkan di bawah:

$(document).ready(function(){
  $('#addRowBtn').click(function(){
    $('#myTable tbody').append('<tr><td>赵六</td><td>26</td><td>教师</td></tr>');
  });
});

Di sini, kami menggunakan pemilih jQuery untuk memilih tbody jadual, dan kemudian memanggil fungsi append untuk menambahkan baris baru dalam tbody. Baris tambahan ialah elemen tr yang mengandungi tiga sel, setiap satu mengandungi nilai. Anda boleh melihat bahawa kami menambah baris pada jadual menggunakan jQuery.

3. Tambah berbilang baris melalui gelung

Kadangkala, kita perlu menambah berbilang baris pada jadual melalui gelung. Kita boleh menggunakan gelung JavaScript untuk menambah berbilang baris. Seperti yang ditunjukkan di bawah:

$(document).ready(function(){
  $('#addRowsBtn').click(function(){
    for(var i = 0; i < 10; i++){
      $('#myTable tbody').append('<tr><td>姓名' + i + '</td><td>年龄' + i + '</td><td>职业' + i + '</td></tr>');
    }
  });
});

Di sini, kami menggunakan gelung for untuk gelung 10 kali, setiap kali menambahkan baris pada badan melalui fungsi tambah. Kita boleh menggunakan penggabungan rentetan untuk menentukan nilai setiap sel, dan menggunakan pembolehubah i untuk menjadikan nilai setiap sel unik.

4. Masukkan baris pada kedudukan yang ditentukan

Kadangkala, kita perlu menambah baris baharu pada kedudukan jadual tertentu. Pada masa ini, kita perlu menentukan lokasi tertentu di mana baris baharu hendak disisipkan. Seperti yang ditunjukkan di bawah:

$(document).ready(function(){
  $('#addAtBtn').click(function(){
    var newRow = '<tr><td>张七</td><td>22</td><td>运动员</td></tr>';
    var targetRow = $('#myTable tbody tr:eq(2)');
    if(targetRow.length > 0){
      targetRow.before(newRow);
    }
  });
});

Di sini, kami mentakrifkan baris baharu newRow dan pilih baris ke-2 targetRow dalam jadual melalui pemilih.

Kemudian, kami menggunakan fungsi sebelum untuk menambah baris baharu sebelum targetRow.

Perlu diingat bahawa jika targetRow tidak wujud, baris baharu tidak akan disisipkan. Jika anda ingin menambah baris selepas baris kedua, anda boleh menggunakan fungsi selepas dan bukannya fungsi sebelum.

Ringkasan

Di atas ialah tiga cara kami menggunakan jQuery untuk menambah baris pada jadual. Kita boleh menambah baris baharu melalui fungsi tambah, menambah berbilang baris melalui gelung atau memasukkan baris baharu pada kedudukan tertentu. Dengan menggunakan jQuery, kami boleh memanjangkan jadual HTML dengan cepat dan mudah serta menjadikan tapak web lebih berkuasa dan lengkap.

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