there is a table that is copied by clicking the following HTML function

<div id="parent_clone"> <table class="parent_clone" id="hidden_change_personal_data_address"> <tr> <td class="personal_area_block1"> <div class="contact_block_title">Delivery address 1:</div> </td> </tr> <tr> <td class="personal_area_block1 inner_block_left"> <div class="">country</div> </td> <td class="personal_area_block2"> <input type="text" name="new_country" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">province state</div> </td> <td class="personal_area_block2"> <input type="text" name="new_state" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">city</div> </td> <td class="personal_area_block2"> <input type="text" name="new_city" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">street</div> </td> <td class="personal_area_block2"> <input type="text" name="new_street" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">house </div> </td> <td class="personal_area_block2"> <input type="text" name="new_house" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">apartment </div> </td> <td class="personal_area_block2"> <input type="text" name="new_apartment" id="new_data" class="left_info" value="" /> </td> </tr> </table> </div> <!---- hidden add address table placce here ------> <table class="personal_data" id="add_address_table"> <tr> <td class="personal_area_block1"> <div class="contact_block_title">Add the address</div> </td> <td class="personal_area_block2"> <img src="images/personal_cabinet/plus.png" id="add_address" /> </td> </tr> <tr> <td class="personal_area_block1"> <div class="contact_block_title"></div> </td> <td class="personal_cabinet_buttons"> <input type="submit" class="button_confirm" id="button_save" name="contact_sent" value="Save" /> <input type="submit" class="button_confirm" id="button_cancel" name="contact_sent" value="Cancel" /> </td> </tr> </table>

Js

 var cloneDiv = document.getElementById('parent_clone'); var cloneTable = document.getElementById('hidden_change_personal_data_address'); var addAddressButton = document.getElementById('add_address'); addAddressButton.addEventListener('click',function(){ var copy = cloneTable.cloneNode(true); var element = document.getElementsByClassName('parent_clone'); for (var i = 0; i < element.length; i++){ element[i].className = 'parent_clone' +'[i+1]'; }; cloneDiv.insertBefore(copy,cloneTable.nextSibling); },true)

but in the loop you need to change the name of the class, depending on the sequence number. Ie 1 table class="parent_clone" , second class="parent_clone2" , etc. depending on how many blocks we add. In the example, an error in the string

 element[i].className = 'parent_clone' +'[i+1]';
  • 'parent_clone' +(i+1) - Grundy
  • one
    in this case, we get a class = "parent_clone1" for each block - ddeadlink
  • why so i changes in cycle - Grundy
  • that's exactly why. tried your option, still the counter does not increase the value of i - ddeadlink
  • Add an example to jsfiddle, or here in the snippet, and also add your html - Grundy

3 answers 3

The chosen approach is not entirely correct:

Since after copying an element with the parent_clone class parent_clone it was not added to the house, then calling the function document.getElementsByClassName('parent_clone'); we get only one element that was before:

 <table class="parent_clone" id="hidden_change_personal_data_address">

then it changes the class to parent_clone1 , and the copied element with the parent_clone class parent_clone added after.

Next, we again copy the id="hidden_change_personal_data_address" element in which the class is already parent_clone1 select the previous element inserted with the class parent_clone , and it is still one on the page - change the class to parent_clone1 and insert the copied div after it.

Actually, the id="hidden_change_personal_data_address" div is simply copied from which the class parent_clone1 quietly inserted, without even entering the loop.

There may be several solutions, the simplest one, as one diva is inserted - you don’t need to choose everything and change classes for them, it’s enough to keep the counter between the calls of the click and set the class to the copied element

 var addAddressButton = document.getElementById('add_address'); var i = 0; addAddressButton.addEventListener('click',function(){ var copy = cloneTable.cloneNode(true); copy.className = 'parent_clone' +(++i); cloneDiv.insertBefore(copy,cloneTable.nextSibling); },true)
  • I understood that the matter was in a cycle, but did not think that the matter was in his absence. Thanks for the reply - ddeadlink
  • @ddeadlink with a cycle could actually happen too, if everyone had this parent_clone class, and it would not be replaced with a specific one, but would remain, for example, parent_clone parent_clone1 , etc. But there is no point in this, as the already assigned elements will simply be redefined for the same, artificial delay, so to speak :-) - Grundy

as well as element[i].className = 'parent_clone' +[i+1];

  • this code is similar to the one I gave in the first comment - Grundy

These lines, in fact, do nothing at all.

 for (var i = 0; i < element.length; i++){ element[i].className = 'parent_clone' +'[i+1]'; }

Below is the correct and working code.

 window.onload = function() { var cloneDiv = document.getElementById('parent_clone'); var cloneTable = document.getElementById('hidden_change_personal_data_address'); var addAddressButton = document.getElementById('add_address'); var count = 1; addAddressButton.addEventListener('click',function(){ var cp = cloneTable.cloneNode(true); var elem = document.getElementsByClassName('parent_clone'); cloneTable.className = 'parent_clone' +count; cloneDiv.insertBefore(cp,cloneTable.nextSibling); count++; },true); }; 
 <div id="parent_clone"> <table class="parent_clone" id="hidden_change_personal_data_address"> <tr> <td class="personal_area_block1"> <div class="contact_block_title">Delivery address 1:</div> </td> </tr> <tr> <td class="personal_area_block1 inner_block_left"> <div class="">country</div> </td> <td class="personal_area_block2"> <input type="text" name="new_country" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">province state</div> </td> <td class="personal_area_block2"> <input type="text" name="new_state" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">city</div> </td> <td class="personal_area_block2"> <input type="text" name="new_city" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">street</div> </td> <td class="personal_area_block2"> <input type="text" name="new_street" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">house </div> </td> <td class="personal_area_block2"> <input type="text" name="new_house" id="new_data" class="left_info" value="" /> </td> </tr> <tr> <td class="inner_block_left"> <div class="">apartment </div> </td> <td class="personal_area_block2"> <input type="text" name="new_apartment" id="new_data" class="left_info" value="" /> </td> </tr> </table> </div> <!---- hidden add address table placce here ------> <table class="personal_data" id="add_address_table"> <tr> <td class="personal_area_block1"> <div class="contact_block_title">Add the address</div> </td> <td class="personal_area_block2"> <img src="images/personal_cabinet/plus.png" id="add_address" /> </td> </tr> <tr> <td class="personal_area_block1"> <div class="contact_block_title"></div> </td> <td class="personal_cabinet_buttons"> <input type="submit" class="button_confirm" id="button_save" name="contact_sent" value="Save" /> <input type="submit" class="button_confirm" id="button_cancel" name="contact_sent" value="Cancel" /> </td> </tr> </table>

  • one
    Cannot set property 'className' of undefined error, given that var emelent is set - ddeadlink
  • The principle is clear, thanks - ddeadlink
  • there is an incorrect count, because The class name of the 1st item changes. That is, parent_clone changes to parent_clone1 on the first click, on parent_clone2 on the second, and so on. - ddeadlink
  • I told you the principle of work, but nobody forbids improving the code. - mix