Bagaimana untuk mengemas kini jadual dengan cepat dengan jquery

Dalam pembangunan bahagian hadapan, paparan jadual adalah sangat biasa. Walau bagaimanapun, apabila data dalam jadual perlu dikemas kini, jika kaedah tradisional digunakan, seperti mengubah suai terus elemen DOM, kebolehbacaan dan kebolehselenggaraan kod akan menjadi sangat lemah. Pada masa ini, kemunculan perpustakaan jQuery memberikan kami penyelesaian untuk mengemas kini jadual dengan cepat.

jQuery ialah perpustakaan JavaScript yang sangat popular. Ciri utamanya ialah ia menyediakan API yang ringkas dan pantas, yang boleh membantu kami mengendalikan DOM dengan elegan dan membina halaman interaktif. Antaranya, jQuery menyediakan banyak kaedah mudah yang boleh membantu kami mengemas kini data pada jadual dengan cepat Mari jelaskan langkah demi langkah pelaksanaan khusus.

1. Dapatkan objek jadual

Sebelum kita mula mengemas kini jadual, kita perlu mendapatkan objek jadual terlebih dahulu. Elemen jadual boleh dipilih menggunakan pemilih jQuery. Sebagai contoh, jika kita mempunyai jadual dengan pengecam kelas "data-data", kodnya adalah seperti berikut:

let table = $(".table-data");

Melalui objek jadual ini, kita boleh beroperasi pada jadual.

2. Gunakan .text() untuk mengemas kini kandungan sel

Jika kita hanya perlu mengemas kini kandungan teks dalam sel, kita boleh menggunakan kaedah .text() untuk melengkapkannya. Dapatkan elemen sel yang anda ingin ubah suai melalui pemilih, dan kemudian gunakan kaedah text() untuk menghantar kandungan teks yang perlu dikemas kini melalui parameter. Sebagai contoh, ubah suai teks dalam sel dalam baris 2, lajur 3 kepada "teks diubah suai":

let td = table.find("tr:eq(1) td:eq(2)");
td.text("修改后的文本");

Perlu diingat bahawa pemilih :eq digunakan di sini, yang bermaksud untuk memilih elemen tertentu yang sepadan ke nombor siri mula dikira dari 0. Oleh itu, tr:eq(1) bermaksud memilih elemen dalam baris 2 jadual, manakala td:eq(2) bermaksud memilih elemen sel dalam lajur 3.

3 Gunakan .attr() untuk mengemas kini atribut sel

Selain mengemas kini kandungan teks dalam sel, kadangkala kita juga perlu mengemas kini atribut dalam sel. Sebagai contoh, kita mungkin perlu mengemas kini atribut data-* dalam sel, atau mengubah suai atribut kelas sel, dsb. Pada ketika ini, ia boleh dilakukan menggunakan kaedah .attr(). Contohnya, ubah suai atribut data-id dalam sel dalam baris 2 dan lajur 3 hingga 123:

let td = table.find("tr:eq(1) td:eq(2)");
td.attr("data-id", "123");

Perlu diambil perhatian bahawa jika berbilang atribut perlu dikemas kini, nilai boleh dihantar melalui objek. Contohnya, untuk mengubah suai atribut kelas dan atribut data-id sel dalam baris 2 dan lajur 3, kodnya adalah seperti berikut:

let td = table.find("tr:eq(1) td:eq(2)");
td.attr({
  "class": "new-class",
  "data-id": "123"
});

4. Gunakan .html() untuk mengemas kini kandungan sel

Kadangkala, Apabila mengemas kini kandungan sel, jika kandungan yang perlu dikemas kini mengandungi teg HTML, anda boleh menggunakan kaedah .html(). Sama seperti menggunakan kaedah .text(), anda boleh menggunakan pemilih jQuery untuk memilih sel yang perlu dikemas kini dan kemudian menghantar kod HTML yang perlu dikemas kini melalui parameter. Contohnya, ubah suai kandungan dalam sel dalam baris 2 dan lajur 3 kepada:

let td = table.find("tr:eq(1) td:eq(2)");
td.html("<a href='#'>链接文本</a>");

5 Gunakan .replaceWith() dan .replaceWith() untuk mengemas kini keseluruhan kandungan baris

Kadang-kadang kita. Seluruh baris di mana sel berada perlu dikemas kini Dalam kes ini, menggunakan kaedah di atas akan menjadi sedikit menyusahkan. Pada ketika ini, anda boleh menggunakan kaedah .replaceWith() untuk menggantikan keseluruhan baris kod HTML secara terus. Sebagai contoh, gantikan keseluruhan kandungan baris 2 dengan:

let tr = table.find("tr:eq(1)");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

Selain itu, jika anda hanya perlu mengubah suai keseluruhan baris di mana sel tertentu terletak, anda boleh mendapatkan kod HTML keseluruhan baris terlebih dahulu, dan kemudian ubah suai keseluruhan baris di mana sel itu terletak.

let td = table.find("tr:eq(1) td:eq(2)");
let tr = td.parents("tr");
tr.replaceWith("<tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr>");

6 Gunakan .empty() dan .append() untuk mengemas kini kandungan jadual

Selain menggunakan kaedah di atas untuk mengemas kini sel atau keseluruhan baris satu demi satu, terdapat cara lain. untuk menggunakan kaedah jQuery empty() dan .append() untuk mengosongkan kandungan asal jadual dan menambah kod HTML baharu. Sebagai contoh, untuk menggantikan keseluruhan kandungan jadual dengan kod HTML baharu, anda boleh menggunakan kaedah berikut:

let newHtml = "<table><tr><td>新的单元格内容1</td><td>新的单元格内容2</td><td>新的单元格内容3</td></tr></table>";
table.empty().append(newHtml);

Di atas adalah beberapa kaedah menggunakan jQuery untuk mengemas kini jadual dengan cepat Melalui kaedah ini, jadual boleh dikemas kini dengan mudah dan cepat, dan kecekapan kod boleh dipertingkatkan kebolehselenggaraan dan kebolehbacaan juga membolehkan kami mengubah suai dan mengemas kini data dalam jadual dengan cepat.

Atas ialah kandungan terperinci Bagaimana untuk mengemas kini jadual dengan cepat dengan jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!