Saya memiliki formulir di bawah a. Saya ingin mengkloning ini dan menambahkan secara dinamis di yang lain dan seterusnya secara dinamis. Saya juga perlu menetapkan id yang bertambah otomatis ke semua elemen formulir juga. Terlepas dari javascript murni, saya tidak dapat menggunakan jQuery atau perpustakaan lainnya.

Ini HTML saya

<tr id="repeat">
    <td><input type="text" id="fieldName" /></td>
    <td>
        <select name="fieldType" id="fieldType">
            <option value="string">String</option>
        </select>
    </td>
    <td><input type="radio" id="mandatory" name="mandatory" value="true" /><input type="radio" id="mandatory" name="mandatory" value="false" /></td>
    <td>Delete Button</td>
</tr>

Ini JavaScript saya

var i = 0;

this.view.findById("start").addEventHandler("click", function () {
    var original = document.getElementById('repeat');
    var clone = original.cloneNode(true);
    original.parentNode.appendChild(clone);
})

Saat ini saya dapat mengkloning elemen formulir di <tr id="repeated1"> secara dinamis dan seterusnya, tetapi tidak dapat menetapkan id yang bertambah otomatis ke kotak input dan kotak pilih. Juga tidak dapat menetapkan nama yang ditambahkan secara otomatis ke tombol radio secara dinamis

0
Soma 20 Desember 2017, 13:36

1 menjawab

Jawaban Terbaik

Anda dapat mengubah Id atau atribut lain sesuai keinginan.

Tetapi untuk kode Anda, solusi saya menggunakan querySelectorAll untuk mendapatkan elemen dan mengubah Idnya, seperti kode di bawah ini, ini diuji dan berfungsi dengan baik:

Berdasarkan kode desain HTML dan fungsi JS ini:

function MakeElementsWithDifferentId() {
        for (var i = 1; i < 10; i++) {
             var original = document.getElementById('repeat');
             var clone = original.cloneNode(true);
             clone.id="repeat"+i;
             clone.querySelectorAll('[id="fieldName"]')[0].id ="fieldName"+i; 
             clone.querySelectorAll('[id="fieldType"]')[0].id ="fieldType"+i; 
             clone.querySelectorAll('[id="mandatory"]')[0].id ="mandatory"+i; 
             clone.children[2].children[0].name="mandatoryName"+i; //To change the radio name also
             original.parentNode.appendChild(clone);
        }
    }
    MakeElementsWithDifferentId();
  <table>
        <tr id="repeat">
            <td><input type="text" id="fieldName" /></td>
            <td>
                <select name="fieldType" id="fieldType">
                    <option value="string">String</option>
                </select>
            </td>
            <td><input type="radio" id="mandatory" name="mandatory" value="true" /> </td>
            <td>Delete Button</td>
        </tr>
    </table>

Fungsi MakeElementsWithDifferentId() membuat 10 elemen batch dengan Id yang berbeda.

Uji JSFiddle

Setelah dijalankan Anda dapat mengklik kanan pada elemen yang Anda inginkan dan melihat Id dengan memeriksa elemen.

Catatan:

Daripada clone.querySelectorAll('[id="fieldName"]')[0] lebih baik mendapatkan elemen dengan querySelector seperti clone.querySelector('[id="fieldName"]')

Harapan akan membantu Anda.

0
Aria 26 Desember 2017, 07:37