將一行添加到表中

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')" /> 

請儘快幫我出這一點。我認爲問題出在獨特的ID上。

Answer 1

您將不得不爲您新生成的元素提供動態ID，以便對它們執行操作。此外，您還可以使用cloneNode（）以純JavaScript形式的克隆元素。

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