Добавление строки в таблицу

Question

Я написал код для динамического добавления новой строки одним нажатием кнопки. Есть 5 столбцов.

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

Когда я нажимаю на переключатель второй строки, параметры появляются в первой строке. Вместо этого я хочу, чтобы они отображались в этом конкретном столбце.

Вот мой код для добавления строки

function addRow(tableID) { 
    var table = document.getElementById(tableID); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var colCount = table.rows[0].cells.length; 

    for(var i=0; i<colCount; i++) { 
     var newcell = row.insertCell(i); 
     newcell.innerHTML = table.rows[1].cells[i].innerHTML; 
    } 
} 

И это мой стол

<TABLE id="dataTable" border="1"> 
    <td><input type="text" id=1 /></td> 
    <td><input type="text" id=2 /></td> 

    <td> 
     <input type="radio" name="radio1" value="1" onClick="toggleDisplay('mydiv','mydiv1');">Own 
     <input type="radio" name="radio2" value="1" onClick="toggleDisplay1('mydiv','mydiv1');">Contractor 

     <div id="mydiv" style="display:none;"> 
      <input type="radio" name="Wage" value="Wage">Wage Board 
      <input type="radio" name="Staff" value="Staff">Staff 
     </div> 

     <div id="mydiv1" style="display:none;"> 
      Name Of Contractor:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name = "text" > 
      <input type="radio" name="No" >No of Workmen 
     </div> 
    </td> 

    <td><input type="text" id=5 /></td> 
    <td><input type="text" id=4 /></td> 

    </tr> 
</TABLE> 

<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> 

Пожалуйста, помогите мне на это как можно скорее. Я думаю, проблема связана с уникальными идентификаторами.

Answer 1

Вам нужно будет предоставить динамические идентификаторы вашим вновь созданным элементам, чтобы выполнять операции над ними. Кроме того, вы можете также clone элементов в чистом javascript с cloneNode().

UPDATE

var tr3=document.getElementById(tableid).getElementsByTagName('tr')[1].cloneNode(true); 
tr3.setAttribute("id","tempCommentId"); 
tr3.getElementsByTagName('td')[1].innerHTML=Comment; 

document.getElementById(tableid).appendChild(tr3); 

Подобно этому, это только для примера. Это один из моих фрагментов кода работы с клонирования.

Answer 2

Отметьте эту работу Fiddle.

Способ, которым вы в настоящее время располагаете, каждый раз, когда вызывается toggleDisplay или toggleDisplay1, он отправляет одинаковые параметры mydiv и mydiv1. Вместо этого нужно найти параметры внутри одной строки.

toggleDisplay = function() { 
    var target = event.target || event.srcElement; 
    $(target).closest("td").find("div").hide(); 
    $(target).closest("td").find("div:eq("+$(target).index("input[name="+$(target).attr("name")+"]")+")").toggle(); 
}; 

Чтобы добавить новую строку можно клонировать первую строку:

addRow = function(tableID) { 
    var table = document.getElementById(tableID); 
    var oClone = table.rows[0].cloneNode(true); 
    $(oClone).find("input[type=radio]").each(function(){ 
     $(this).attr("name", "radio"+table.rows.length); 
    }); 
    $(oClone).find("div").hide(); 
    table.insertBefore(oClone); 
}; 

Также ваши радио кнопки имеют разные имена, таким образом, они не ведут себя должным образом:

<TABLE id="dataTable" border="1"> 
    <tr> 
    <td><input type="text" /></td> 
    <td><input type="text" /></td> 

    <td> 
     <input type="radio" name="radio0" onClick="toggleDisplay();"/>Own 
      <input type="radio" name="radio0" onClick="toggleDisplay();"/>Contractor 

     <div style="display:none;"> 
      <input type="radio" name="Wage" value="Wage"/>Wage Board 
      <input type="radio" name="Staff" value="Staff"/>Staff 
     </div> 

     <div style="display:none;"> 
      Name Of Contractor:&nbsp;&nbsp;&nbsp;&nbsp;<input type="text" name = "text" /> 
      <input type="radio" name="No" />No of Workmen 
     </div> 
    </td> 

    <td><input type="text" /></td> 
    <td><input type="text" /></td> 

    </tr> 
</TABLE> 
<input type=button onclick="addRow('dataTable')" value="add row" />