Jadual Kandungan
表格示例
Rumah hujung hadapan web tutorial js Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik

Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik

Feb 26, 2024 pm 04:06 PM
lembaran memperbaharui

Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik

jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas dalam pembangunan web. Dalam pembangunan web, kami sering menghadapi situasi di mana data perlu dipaparkan, dan jadual adalah cara biasa untuk memaparkan data. Dalam jadual dinamik, selalunya terdapat operasi seperti pemadaman, penambahan, pengisihan, dll. Pada masa ini, adalah perlu untuk mengemas kini nombor siri dalam jadual secara automatik apabila bilangan baris dalam jadual berubah. Berikut akan memperkenalkan secara terperinci cara menggunakan jQuery untuk mencapai fungsi ini.

Contoh kod adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
    table {
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: center;
    }

    th {
        background-color: #f2f2f2;
    }
</style>
</head>
<body>
<h1 id="表格示例">表格示例</h1>
<table id="data-table">
    <thead>
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Alice</td>
            <td>25</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bob</td>
            <td>30</td>
        </tr>
        <tr>
            <td>3</td>
            <td>Charlie</td>
            <td>28</td>
        </tr>
    </tbody>
</table>

<button id="add-row">新增行</button>
<button id="delete-row">删除行</button>

<script>
    // 初始表格序号
    function updateRowNumber() {
        $('#data-table tbody tr').each(function(index) {
            $(this).find('td:first').text(index + 1);
        });
    }

    // 新增行
    $('#add-row').on('click', function() {
        $('#data-table tbody').append('<tr><td></td><td>New</td><td>0</td></tr>');
        updateRowNumber();
    });

    // 删除行
    $('#delete-row').on('click', function() {
        $('#data-table tbody tr:last').remove();
        updateRowNumber();
    });
</script>
</body>
</html>
Salin selepas log masuk

Dalam kod di atas, jadual yang mengandungi nama dan umur pertama kali dibuat, dan pengepala yang mengandungi nombor siri, nama dan umur ditambah. Kemudian saya menggunakan jQuery untuk menulis dua pendengar acara, masing-masing untuk menambah baris dan memadam baris. Antaranya, melalui fungsi updateRowNumber函数实现了当表格行数变化时,自动更新表格中的序号。新增行和删除行的操作都会调用updateRowNumber, nombor siri dikemas kini secara automatik apabila bilangan baris jadual berubah.

Melalui contoh kod sedemikian, anda boleh melaksanakan fungsi kemas kini automatik nombor siri dengan mudah apabila bilangan baris jadual berubah, supaya jadual dapat mengekalkan kesan paparan yang baik apabila data berubah secara dinamik.

Atas ialah kandungan terperinci Pelaksanaan jQuery mengemas kini nombor baris jadual secara automatik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk membetulkan kemas kini Blizzard Battle.net tersekat pada 45%? Bagaimana untuk membetulkan kemas kini Blizzard Battle.net tersekat pada 45%? Mar 16, 2024 pm 06:52 PM

Kemas kini Blizzard Battle.net terus tersekat pada 45%, bagaimana untuk menyelesaikannya? Baru-baru ini, ramai orang telah terperangkap pada bar kemajuan 45% apabila mengemas kini perisian Mereka masih akan tersekat selepas dimulakan semula beberapa kali Jadi bagaimana untuk menyelesaikan situasi ini? itu, tutorial perisian ini akan berkongsi langkah operasi, dengan harapan dapat membantu lebih ramai orang. Kemas kini Blizzard Battle.net terus tersekat pada 45%, bagaimana untuk menyelesaikannya 1. Pelanggan 1. Mula-mula, anda perlu mengesahkan bahawa klien anda adalah versi rasmi yang dimuat turun dari laman web rasmi. 2. Jika tidak, pengguna boleh memasuki laman web pelayan Asia untuk memuat turun. 3. Selepas memasukkan, klik Muat turun di penjuru kanan sebelah atas. Nota: Pastikan anda tidak memilih Bahasa Cina Ringkas semasa memasang.

Langkah-langkah melaraskan format gambar yang disisipkan dalam jadual PPT Langkah-langkah melaraskan format gambar yang disisipkan dalam jadual PPT Mar 26, 2024 pm 04:16 PM

1. Buat fail PPT baharu dan namakannya [Petua PPT] sebagai contoh. 2. Klik dua kali [Petua PPT] untuk membuka fail PPT. 3. Masukkan jadual dengan dua baris dan dua lajur sebagai contoh. 4. Klik dua kali pada sempadan jadual, dan pilihan [Reka Bentuk] akan muncul pada bar alat atas. 5. Klik pilihan [Shading] dan klik [Picture]. 6. Klik [Gambar] untuk muncul kotak dialog pilihan isi dengan gambar sebagai latar belakang. 7. Cari dulang yang anda ingin masukkan dalam direktori dan klik OK untuk memasukkan gambar. 8. Klik kanan pada kotak jadual untuk memaparkan kotak dialog tetapan. 9. Klik [Format Cells] dan semak [Imej jubin sebagai teduhan]. 10. Tetapkan [Pusat], [Mirror] dan fungsi lain yang anda perlukan, dan klik OK. Nota: Lalai adalah untuk gambar diisi dalam jadual

Cara membuat jadual untuk ramalan jualan Cara membuat jadual untuk ramalan jualan Mar 20, 2024 pm 03:06 PM

Mampu membuat borang dengan mahir bukan sahaja kemahiran yang diperlukan untuk perakaunan, sumber manusia dan kewangan Bagi kebanyakan kakitangan jualan, belajar membuat borang juga sangat penting. Kerana data yang berkaitan dengan jualan adalah sangat besar dan kompleks, dan ia tidak boleh direkodkan dalam dokumen untuk menjelaskan masalah tersebut. Untuk membolehkan lebih ramai kakitangan jualan mahir menggunakan Excel untuk membuat jadual, editor akan memperkenalkan isu pembuatan jadual mengenai ramalan jualan Rakan yang memerlukan tidak boleh ketinggalan! 1. Buka [Ramalan Jualan dan Tetapan Sasaran], xlsm, untuk menganalisis data yang disimpan dalam setiap jadual. 2. Buat [Lembaran Kerja Kosong] baharu, pilih [Sel], dan masukkan [Maklumat Label]. [Seret] ke bawah dan [Isi] bulan. Masukkan data [Lain-lain] dan klik [

Bagaimana untuk menetapkan nilai WPS untuk menukar warna secara automatik mengikut syarat_Langkah untuk menetapkan nilai jadual WPS untuk menukar warna secara automatik mengikut keadaan Bagaimana untuk menetapkan nilai WPS untuk menukar warna secara automatik mengikut syarat_Langkah untuk menetapkan nilai jadual WPS untuk menukar warna secara automatik mengikut keadaan Mar 27, 2024 pm 07:30 PM

1. Buka lembaran kerja dan cari butang [Start]-[Conditional Formatting]. 2. Klik Pemilihan Lajur dan pilih lajur yang mana pemformatan bersyarat akan ditambahkan. 3. Klik butang [Pemformatan Bersyarat] untuk memaparkan menu pilihan. 4. Pilih [Serlahkan peraturan bersyarat]-[Antara]. 5. Isikan peraturan: 20, 24, teks hijau tua dengan warna isian gelap. 6. Selepas pengesahan, data dalam lajur yang dipilih akan diwarnakan dengan nombor, teks dan kotak sel yang sepadan mengikut tetapan. 7. Peraturan bersyarat tanpa konflik boleh ditambah berulang kali, tetapi untuk peraturan bercanggah WPS akan menggantikan peraturan bersyarat yang ditetapkan sebelum ini dengan peraturan tambahan terakhir. 8. Tambah lajur sel berulang kali selepas [Antara] peraturan 20-24 dan [Kurang daripada] 20. 9. Jika anda perlu menukar peraturan, anda boleh mengosongkan peraturan dan kemudian menetapkan semula peraturan.

Bagaimana untuk memasang Angular pada Ubuntu 24.04 Bagaimana untuk memasang Angular pada Ubuntu 24.04 Mar 23, 2024 pm 12:20 PM

Angular.js ialah platform JavaScript yang boleh diakses secara bebas untuk mencipta aplikasi dinamik. Ia membolehkan anda menyatakan pelbagai aspek aplikasi anda dengan cepat dan jelas dengan memanjangkan sintaks HTML sebagai bahasa templat. Angular.js menyediakan pelbagai alatan untuk membantu anda menulis, mengemas kini dan menguji kod anda. Selain itu, ia menyediakan banyak ciri seperti penghalaan dan pengurusan borang. Panduan ini akan membincangkan cara memasang Angular pada Ubuntu24. Mula-mula, anda perlu memasang Node.js. Node.js ialah persekitaran berjalan JavaScript berdasarkan enjin ChromeV8 yang membolehkan anda menjalankan kod JavaScript pada bahagian pelayan. Untuk berada di Ub

Adakah anda tahu cara menjumlahkan jadual Word? Adakah anda tahu cara menjumlahkan jadual Word? Mar 21, 2024 pm 01:10 PM

Kadangkala, kita sering menghadapi masalah mengira dalam jadual Word Secara amnya, apabila menghadapi masalah seperti itu, kebanyakan pelajar akan menyalin jadual Word ke Excel untuk pengiraan secara senyap. Adakah terdapat cara cepat untuk mengiranya? Sudah tentu ada, sebenarnya jumlahnya juga boleh dikira dalam Word. Jadi, adakah anda tahu bagaimana untuk melakukannya? Hari ini, mari kita lihat bersama-sama! Tanpa berlengah lagi, rakan-rakan yang memerlukan perlu segera mengumpulnya! Butiran langkah: 1. Mula-mula, kita buka perisian Word pada komputer dan buka dokumen yang perlu diproses. (Seperti yang ditunjukkan dalam gambar) 2. Seterusnya, kami meletakkan kursor pada sel di mana nilai yang dijumlahkan terletak (seperti yang ditunjukkan dalam gambar kemudian, kami klik [Bar Menu);

Lantern and Dungeon dikemas kini pada 29 Februari: Versi termaster ╳ 'Legend of Nezha' linkage Lantern and Dungeon dikemas kini pada 29 Februari: Versi termaster ╳ 'Legend of Nezha' linkage Feb 28, 2024 am 08:13 AM

Lantern and Dungeons telah disahkan akan dikemas kini pada 29 Februari Selepas kemas kini, versi remastered Lantern and Dungeons akan dilancarkan, dan versi remaster juga akan dipautkan ke Legend of Nezha Versi remaster juga akan membawakan yang baharu profesion, dan pemain boleh terus menukar kerja, kandungan penjara juga akan diperluas, kawasan penjara baharu akan dibuka, dsb. Jadual kemas kini permainan mudah alih Lantern dan Dungeon dikemas kini pada 29 Februari: Versi terpakai ╳ Kandungan utama versi pautan "Legend of Nezha" Profesion baharu, mengapa anda dijemput untuk menukar kerja Pencahayaan lampu sebenarnya boleh menukar kerja Saya mendengar bahawa selepas bertukar kerja, pemegang tanglung juga boleh belajar banyak kemahiran yang menarik: Seluar Thai adalah panas! The Legend of Nezha akan datang bersama! Melangkah di atas roda panas, memegang bulatan langit dan bumi di tangan ♫ ~ Wira kecil dengan kebijaksanaan dan keberanian: Nezha dan Little Dragon Girl akan datang

Windows tidak boleh mengakses peranti, laluan atau fail yang ditentukan Windows tidak boleh mengakses peranti, laluan atau fail yang ditentukan Jun 18, 2024 pm 04:49 PM

Komputer rakan mempunyai kesalahan sedemikian Apabila membuka "PC ini" dan fail pemacu C, ia akan menggesa "Explorer.EXE Windows tidak boleh mengakses peranti, laluan atau fail yang ditentukan. Anda mungkin tidak mempunyai kebenaran yang sesuai untuk mengakses projek. " Termasuk folder, fail, Komputer ini, Tong Kitar Semula, dsb., klik dua kali akan muncul tetingkap sedemikian, tetapi adalah perkara biasa untuk membukanya dengan mengklik kanan. Ini disebabkan oleh kemas kini sistem Jika anda juga menghadapi situasi ini, editor di bawah akan mengajar anda cara menyelesaikannya. 1. Buka editor pendaftaran Win+R dan masukkan regedit, atau klik kanan menu mula untuk menjalankan dan masukkan regedit 2. Cari registri "Computer\HKEY_CLASSES_ROOT\PackagedCom\ClassInd";

See all articles