Bagaimana untuk Menjana Elemen Borang Input secara Dinamik dalam JavaScript?-tutorial js-php.cn

Bagaimana untuk Menjana Elemen Borang Input secara Dinamik dalam JavaScript?

Barbara Streisand

Lepaskan： 2024-10-28 06:38:02

asal

257 orang telah melayarinya

How to Dynamically Generate Input Form Elements in JavaScript?

Mencipta Elemen Borang Input Secara Dinamik

Artikel ini membincangkan cabaran pengaturcaraan biasa: mencipta elemen borang input secara dinamik berdasarkan input pengguna. Matlamatnya adalah untuk menyediakan penyelesaian yang jelas dan mudah untuk pemula, menggunakan JavaScript.

Masalahnya

Halaman web termasuk medan input teks di mana pengguna boleh memasukkan nombor. Setelah mengklik pautan yang sepadan, halaman tersebut harus menjana secara dinamik medan input sebanyak itu untuk pengguna memberikan maklumat tambahan. Pengguna boleh memasukkan maksimum 10 nilai.

Memahami Penyelesaian

Mendapatkan Masukan Pengguna:
- An pengendali acara onclick digunakan pada pautan yang bertanggungjawab untuk menjana medan input.
- Dalam pengendali acara, nilai yang dimasukkan dalam medan input teks boleh diambil menggunakan document.getElementById().
Mencipta Bekas:
- Elemen bekas, seperti div dengan atribut id (cth., "bekas"), diperlukan untuk memegang medan input yang dijana secara dinamik.
Menjana Elemen Secara Dinamik:
- Menggunakan document.createElement(), baharu elemen input boleh dibuat.
- Atribut seperti jenis dan nama hendaklah ditetapkan untuk setiap input.
- appendChild() digunakan untuk menambahkan setiap elemen input pada bekas.
Mengosongkan Elemen Sebelumnya:
- Untuk mengelakkan pendua, sebarang elemen anak sedia ada dalam bekas hendaklah dialih keluar sebelum menjana elemen baharu. Ini boleh dilakukan menggunakan hasChildNodes() dan removeChild().
Peningkatan Tambahan:
- Anda boleh menambah elemen seperti pemisah baris (document.createElement("br")) atau nod teks (document.createTextNode()) untuk memperbaik reka letak.

Contoh Kod

Coretan kod berikut menunjukkan pelaksanaan penyelesaian:

<html>
<head>
    <script type='text/javascript'>
        function addFields(){
            // Get number of inputs
            var number = document.getElementById("member").value;

            // Get container
            var container = document.getElementById("container");

            // Clear container
            while (container.hasChildNodes()) {
                container.removeChild(container.lastChild);
            }

            // Generate inputs
            for (i=0;i<number;i++){
                // Text node
                container.appendChild(document.createTextNode("Member " + (i+1)));

                // Input element
                var input = document.createElement("input");
                input.type = "text";
                input.name = "member" + i;
                container.appendChild(input);

                // Line break
                container.appendChild(document.createElement("br"));
            }
        }
    </script>
</head>
<body>
    <input type="text" id="member" name="member" value="">Number of members: (max. 10)<br />
    <a href="#" id="filldetails" onclick="addFields()">Fill Details</a>
    <div id="container"/>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk Menjana Elemen Borang Input secara Dinamik dalam JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!