Поля ошибки клонирования в пределах таблицы с Javascript

Question

В приведенном ниже коде отлично работает для клонирования таблицы, но она недостаточно глубока, чтобы переименовывать входы каждого поля формы в таблице. Например Attendee1, Attendee2, Attendee3 и т. Д.

Есть ли способ вместо того, чтобы просто захватывать NewEl.children, чтобы просто найти все входные элементы в таблице, а затем переименовать их?

Я не пытаюсь добавить строку, мне нужно клонировать всю таблицу.

Любая помощь, которую вы всем можете получить в киберланде, может быть очень благодарна.

<form name="EditRoster" method="post" action="DoRoster.php"> 
    <table id="RosterTbl" cellspacing="0" cellpadding="2"> 
     <tr style="text-align:left;vertical-align:top;"> 
      <td><b>Name</b>:</td> 
      <td> 
       <input type="text" name="Attendee" value="" size="25" onclick="alert(this.name)"> 
      </td> 
      <td><b>Paid</b>:</td> 
      <td>&nbsp; 
       <input type="checkbox" name="Paid" value="Yes" size="25">&nbsp; 
      </td> 
     </tr> 
     <tr style="text-align:left;vertical-align:top;"> 
      <td><b>Email</b>:</td> 
      <td> 
       <input type="text" name="Email" value="" size="25"> 
      </td> 
      <td><b>Paid When</b>:</td> 
      <td>&nbsp; 
       <input type="text" name="PaidWhen" value="" size="10">&nbsp; 
      </td> 
     </tr> 
    </table> 
    <div style="padding:5px;"> 
     <input type="hidden" name="NumStudents" value="0"> 
     <input type="button" name="AddPersonButton" value="Add Person" onclick="CloneElement('RosterTbl','NumStudents');"> 
    </div> 
</form> 

<script language="javascript"> 

var TheForm = document.forms.EditRoster; 

function CloneElement(ElToCloneId, CounterEl) { 
    var CloneCount = TheForm[CounterEl].value; 
    CloneCount++; 
    TheForm[CounterEl].value = CloneCount; 

    var ElToClone = document.getElementById(ElToCloneId); 

    var NewEl = ElToClone.cloneNode(true); 
    NewEl.id = ElToCloneId + CloneCount; 
    NewEl.style.display = "block"; 

    var NewField = NewEl.children; 
    for (var i = 0; i < NewField.length; i++) { 
     var InputName = NewField[i].name; 
     if (InputName) { 
      NewField[i].name = InputName + CloneCount; 
     } 

     var insertHere = document.getElementById(ElToCloneId); 
     insertHere.parentNode.insertBefore(NewEl, insertHere); 
    } 
} 

</script> 

Answer 1

Посмотрел, как вы были на правильном пути, но я думаю, что вы принимали несколько дополнительных шагов, так что я думаю, что я упростил;)

Одна вещь, которую вы пропали без вести в том, что значение NumStudents возвращается как строка, поэтому вам нужно позвонить parseInt().

var theForm = document.forms.EditRoster; 

function insertAfter(referenceNode, newNode) { 
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling); 
} 

function CloneElement(cloneID, counterName) { 
    var clone = document.getElementById(cloneID); 
    var newClone = clone.cloneNode(true); 
    var counter = theForm[counterName].value = parseInt(theForm[counterName].value) + 1; 

    // Update the form ID 
    newClone.id = newClone.id + counter; 

    // Update the child Names 
    var items = newClone.getElementsByTagName("*"); 
    for (var i = 0; i < items.length; i++) { 
     if (items[i].name != null) 
      items[i].name = items[i].name + counter; 
    } 

    insertAfter(clone, newClone); 
} 

Настоящая рабочая копия jsFiddle.

P.s. Я не был уверен, что вы хотите очистить новые поля, чтобы я оставил их.