我编写了一个代码,可以通过单击按钮动态添加新行。共有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: <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。
答案 0 :(得分:1)
您必须为新生成的元素提供动态ID,以便对它们执行操作。此外,您还可以使用 cloneNode()在纯JavaScript中克隆元素。
<强>更新强>
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);
像这样,这仅仅是例如。这是我使用克隆的工作代码段之一。
答案 1 :(得分:1)
查看此工作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: <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" />