自動拡張IDを持つフォーム要素をすべての要素に複製する方法

Question

私は以下のフォームを持っています。私はこれを複製し、動的に別のものに動的に追加したいと思います。また、すべてのフォーム要素にも自動インクリメントIDを割り当てる必要があります。純粋なjavascriptを除いて、私はjQueryやその他のライブラリを使用することはできません。ここで

は私JavaScriptが

var i = 0; 

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

現在、私は動的など<tr id="repeated1">でフォーム要素を複製することができている私のHTMLここ

<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> 

ですが、自動車を割り当てることができないが、入力ボックスにIDをインクリメントボックスを選択します。ラジオボタンに自動インクリメント名を動的に割り当てることもできません

Answer 1

Idまたは他の属性を必要に応じて変更できます。

が、私の解決策は、要素を取得し、それは、ID、コード以下のようなものです変更するquerySelectorAllを使用しているあなたのコードのために、それがテストされ、素敵な作品さ：

このHTMLデザインコードとJS関数に基づく：

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>

MakeElementsWithDifferentId()機能は異なるIDを持つ10個のバッチ要素を作ります。あなたは右のあなたがしたい要素をクリックし、検査要素によってIdを見ることができ、実行後

JSFiddle Test

。

注：

代わりのclone.querySelectorAll('[id="fieldName"]')[0]それは希望がお手伝いします

clone.querySelector('[id="fieldName"]')よう querySelectorで要素を取得する方が良いでしょう。